• Home
  • 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

    收藏
    上一篇：VueRouter和ReactRouter原理:$router与$route区别，见习React Router 4.0
    下一篇：从vue-router报Unknown custom element: 看Vue.use&install
    延伸阅读：