小程式 · <input>報錯：<input v-model="item">: You are binding v-model directly...

報錯來源：

input使用for迴圈：

<input v-for="(item,index) in list" :key="index" v-model="item"/>

例項：

  <div class="cu-form-group" v-for="(item,index) in appData.welcomeList" :key="index" >
    <input class='radius' :name="'welcome'+index" v-model="item"/>
    <button class='cu-btn bg-red shadow-blur sm' @click="deleteWelcome(index)">
      <span class='icon-delete'></span> </button>
  </div>
複製程式碼

報錯內容：

<input v-model="item">: 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 l ocal variable. Consider using an array of objects and use v-model on an object property instead.

正確寫法:

<input v-for="(item,index) in list" :key="index" v-model="list[index]"/>
複製程式碼

例項：

  <div class="cu-form-group" v-for="(item,index) in appData.welcomeList" :key="index" >
    <input class='radius' :name="'welcome'+index" v-model="appData.welcomeList[index]"/>
    <button class='cu-btn bg-red shadow-blur sm' @click="deleteWelcome(index)">
      <span class='icon-delete'></span> </button>
  </div>
複製程式碼

不要寫成

<input v-model="item"> //錯的
複製程式碼