'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