'vue.js i used 'v-once' in 'v-for' statement,why can't find 'item'?
<div v-for="item in imControls.messages" >
<p v-once>
<span class="" v-if="item.type==3">{{item.name}}:</span>
<span class="red" v-if="item.type==4">{{item.name}}:</span>
<span class="blue" v-if="item.type==2">{{item.name}}:</span>
<span class="grey" v-if="item.type==1">{{item.name}}:</span>
<span v-html="item.text"></span>
</p>
</div>
imControls.messages exists, if I don't use v-once on p label, it's ok, but if I use v-once, it can't find item.
The error is
'vue.js:2574 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
vue.js:2217 Uncaught TypeError: Cannot read property 'type' of undefined'
Solution 1:[1]
v-once directive can be used in the v-for directly
<div v-for="item in imControls.messages" v-once>
<span class="" v-if="item.type==3">{{item.name}}:</span>
<span class="red" v-if="item.type==4">{{item.name}}:</span>
<span class="blue" v-if="item.type==2">{{item.name}}:</span>
<span class="grey" v-if="item.type==1">{{item.name}}:</span>
<span v-html="item.text"></span>
</div>
Solution 2:[2]
Don't need v-once in v-for statement,because it is fixed in vue.js 2.0.8
4247 fix v-html resetting content even when content string stays the same
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | highFlyingSmurfs |
| Solution 2 | Community |
