Problem with literal object props in template #4060

Activity

1. paulpflug commented on Oct 29, 2016

   

   paulpflug

   on Oct 29, 2016

   More actions

   The problem is within your watch..

   watch: {
     prop: function(val,oldVal) {
       // val will be {}
       // oldVal will be {}, too, but another instance, so they are not equal
     }
   }

   You can do two things:

   • make a deepEqual on val & oldVal to only emit when the content really changed.
   • don't use literals in props, maybe pass down a computed value instead?

   👍React with 👍4Reacted by Herrington Darkholme, Paul Pflugradt, chengchao and Chris Fritz
2. fnlctrl commented on Oct 30, 2016

   

   fnlctrl

   on Oct 30, 2016

   Member

   More actions

   Using object literals in template as prop should indeed be warned against, since in 2.0 it means creating a new object every time the component updates... Though I can't seem to think of a way to detect it at runtime. Maybe we can add a warning in the docs? @chrisvfritz
3. fnlctrl

   added

   improvement

   2.0

   on Oct 30, 2016
4. chrisvfritz commented on Oct 31, 2016

   

   chrisvfritz

   on Oct 31, 2016

   Last edited by chrisvfritz

   Contributor

   More actions

   @fnlctrl When parsing the template, could we add object/array literals to a component instance-scoped cache, so that their reference remained the same between updates?
5. fnlctrl commented on Oct 31, 2016

   

   fnlctrl

   on Oct 31, 2016

   Member

   More actions

   @chrisvfritz Hmm that seems possible, but I'm not familiar with the template compiler.. @defcc any ideas?
6. HerringtonDarkholme commented on Oct 31, 2016

   

   HerringtonDarkholme

   on Oct 31, 2016

   Last edited by HerringtonDarkholme

   Member

   More actions

   Seems impossible because Vue's parse is a simple regex scanner + recursive descendant parser, optimized for payload size. No real javascript expression parser is included.

   Source: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js#L16 and https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js#L196

   Expression like :prop="'nested "quote"'" is not supported.

   IMHO, adding a warning in the doc is probably enough for now. For longer term, I think this check is better integrated in vue-template-validator or so?
7. defcc commented on Oct 31, 2016

   

   defcc

   on Oct 31, 2016

   Last edited by defcc

   Member

   More actions

   I think there is no need to cache the literals just for the misusage of binding props,

   maybe we could introduce a warning instead when parsing in dev mode ?

   👍React with 👍1Reacted by Eduardo San Martin Morote
8. posva commented on Oct 31, 2016

   

   posva

   on Oct 31, 2016

   Member

   More actions

   The use case is not clear to me. The example is just changing the number until it reaches 100
   If we introduce the warning, what will it check? Using object literals is quite usual for class and style bindings. If we warn the user about that, we're kind of forcing him to fix it because nobody wants to leave a warning on their console 😛
   I think it's good to tell the user to use a computed property instead but wanted to point out that
9. defcc commented on Oct 31, 2016

   

   defcc

   on Oct 31, 2016

   Member

   More actions

   Means non-dynamic value, not just object literals :)

   for example

   :arr="[1]" :obj="{}" :id="1"

   👍React with 👍3Reacted by Eduardo San Martin Morote, chzhbob and Noemi-
10. chrisvfritz commented on Oct 31, 2016

    

    chrisvfritz

    on Oct 31, 2016

    Contributor

    More actions

    I think only objects and arrays are a problem though, because those are pass by reference in JS. Strings, numbers, and booleans are all immutable, so equal values will always share the same reference.

    Either way, I'd like to avoid adding notes like this to the docs - even if we don't fix it. Not only is this an edge case, but the resulting behavior has nothing to do with Vue specifically, but would be the expected behavior for any JS lib with render functions.

    👍React with 👍4Reacted by Eduardo San Martin Morote, Daniel Diekmeier, R-Yin and Mark Fisher
11. yyx990803 commented on Nov 1, 2016

    

    yyx990803

    on Nov 1, 2016

    Member

    More actions

    I don't think there is a way to prevent what is happening in the original fiddle - it's expected behavior given how 2.0's render system works.

    As for warning literal object/arrays, the tricky thing is it could be valid usage as long as the user doesn't attempt to mutate the value (which I believe is already warned against in the docs).
12. yyx990803

    closed this as completedon Nov 1, 2016
13. coolzjy commented on Nov 6, 2016

    

    coolzjy

    on Nov 6, 2016

    Contributor

    More actions

    I'm also encountered this problem in my code, and I spend lots of time debugging without help of warning. I also search the docs for literal keyword, and I only got two results (1/2), one of which even give an example of using object literals:

    <div v-demo="{ color: 'white', text: 'hello!' }"></div>

    I think static prop is useful under many conditions. Static props' action in Vue 1.x is in line with expectations, but a little confusing in Vue 2.x (although I know how it works).

    I also noticed that .once modifier was removed in Vue 2.x. I don't think this modifier breaks one-way binding. On the contrary, I think it will be helpful in Vue 2.x to perform a static prop. So any idea of bringing it back? @yyx990803
14. Noemi- commented on Jun 3, 2019

    

    Noemi-

    on Jun 3, 2019

    More actions

    I encountered this as well, when I try to bind an Array literal to a component's property. It spend me half day to realize that it is a "render function + Array literal property" issue, through several experiments and debug.
15. chandanwtb commented on Sep 20, 2020

    

    chandanwtb

    on Sep 20, 2020

    Last edited by chandanwtb

    More actions

    When I am using format: 'DD/MM/YYYY', Calendar is working fine but when format: 'DD/MM/YYYY h:mm:ss' Calendar is Not working.
    

    But When format: 'DD/MM/YYYY'

    
16. danielgindi commented on Feb 1, 2022

    

    danielgindi

    on Feb 1, 2022

    More actions

    Just bit me in the behind too. The vue eslint plugin should detect this.