home > webfront > ECMAS > vue >

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

author:zhoulujun@live.cn    hits:

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