vue2.0.3 v-once doesn't work in list rendering?

[koronero]

like this:

<template v-for="item in titems">
  <li>
    <div>{{item.message}}</div>
    <div><img :src='item.url' v-once></div>
  </li>
</template>

or this:

<template v-for="item in titems">
  <li>
    <div>{{item.message}}</div>
    <div v-once><img :src='item.url'></div>
  </li>
</template>

[defcc]

Please make sure to read the Issue Reporting Guidelines before opening new issues.

As for this issue, I am looking into this.

[posva]

Here's the repro: https://jsfiddle.net/posva/6up9mdqf/
Adding v-once doesn't render at all

[koronero]

@posva Here's the repro:https://jsfiddle.net/6up9mdqf/4/

[posva]

@koronero I don't understand your message, I wasn't asking for a repro, I provided one 😄

[seekerlee]

I just met a similar (probably the same) issue with v-once and found here.
I updated the repo for my case: https://jsfiddle.net/6up9mdqf/8/

Thanks.

[posva]

@koronero @seekerlee I think v-once should be used in the same element as the v-for element because v-once is executed before the v-for and therefore the item variable doesn't exist yet

As a side note: don't use v-once if you don't need it yet 😛

[seekerlee]

@posva here's my case just for reference:

We are working on en email app and emails are rendered by VueJS since 1.x version.
emails in a conversation are stored in an array like below:
data:{emails: [{ read:false, starred:false, content:'<div> html format data</div>' },{ read:false, starred:true, content:'<div> html format data2</div>' }]}

Since the email html content could be huge, we don't want it be updated since born. And we need to do lots of DOM operation to the html content (I'm using a custom directive to do it when 'inserted'). For example: add ellipsis and hide quoted content, highlight some text, add some link, process mentions by @ symbol etc. We also don't want these operations to be executed more than once.

So we have the requirement for both v-once and v-for.
In 1.x version we use {{{* email.content }}}, and it works good. After I spent some time updated VueJS to this version, I found this issue.

[posva]

But using v-once on the v-for should work for your case, doesn't it?

[seekerlee]

@posva using v-once on the v-for doesn't not run into error. But it's not what we want. For example: we have a group of email and we show them use v-for and v-once. User can mark any email as starred, then the UI should reflect and show a ⭐️. If we use v-once on the v-for, the UI will not change after user star the email.

[posva]

@seekerlee Does using the v-once inside a component fixes the problem?

[seekerlee]

I will try and let you know.

[posva]

Here's an example: https://jsfiddle.net/posva/5k4ptmqg/

[seekerlee]

Thanks very much for your fiddle. It works for my case.
I simplified the fiddle a bit for reference and later who searched here. https://jsfiddle.net/t7Lm5xue/
I will change our Vue template to use custom component.

[kosmos]

This bug reappeared in version 2.5.2 version:
https://jsfiddle.net/vjkosmos/t7Lm5xue/3/