Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
koronero opened this issue Oct 17, 2016 · 14 comments
Closed

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

koronero opened this issue Oct 17, 2016 · 14 comments
Labels

Comments

@koronero
Copy link

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
Copy link
Member

defcc commented Oct 17, 2016

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

As for this issue, I am looking into this.

@posva
Copy link
Member

posva commented Oct 17, 2016

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

@koronero
Copy link
Author

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

@posva
Copy link
Member

posva commented Oct 17, 2016

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

@LinusBorg LinusBorg added the 2.0 label Oct 18, 2016
@seekerlee
Copy link

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
Copy link
Member

posva commented Oct 25, 2016

@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
Copy link

seekerlee commented Oct 25, 2016

@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
Copy link
Member

posva commented Oct 27, 2016

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

@seekerlee
Copy link

@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
Copy link
Member

posva commented Oct 27, 2016

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

@seekerlee
Copy link

I will try and let you know.

@posva
Copy link
Member

posva commented Oct 27, 2016

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

@seekerlee
Copy link

seekerlee commented Oct 27, 2016

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
Copy link

kosmos commented Nov 14, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants