• home > webfront > ECMAS > vue >

    数组循环v-model绑定报错You are binding v-model directly to

    Author:[email protected] Date:

    You are binding v-model directly to a v-for iteration alias This will not be able to modify the v-for source

     You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

    下午刚刚睡醒,数组循环,v-model绑定到input,出现报错。

    <div v-for="(tab,index) in tabs" :key="index">

                      <input type="text" placeholder="" v-model="tab">

                      <div class="删除" @click=del(index)></div>

    </div>

    只需改写为:

    <div v-for="(tab,index) in tabs" :key="index>

                      <input type="text" placeholder="" v-model="editTabProps.tabs[index]">

                      <div class="删除" @click=del(index)></div>

    </div>


    类似的有:https://stackoverflow.com/questions/42629509/you-are-binding-v-model-directly-to-a-v-for-iteration-alias

    关键是why?

    因为 v-model必须绑定 vue data 里面的值。(双向数据绑定))

    而v-for="(tab,index) in tabs" 是ast时的临时变量,是无法watch与 observe 的,当然报错

    更详细可以查看 梳理vue双向绑定的实现原理 https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/2840.html 



    转载本站文章《数组循环v-model绑定报错You are binding v-model directly to》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/7476.html