Vue.js中如何將v-model與方法綁定

Question

我正在學習vuejs（3）。

我有這個循環：

<tr v-for="index in 7" :key="index">
            <td>
              {{ index }} {{ getDayOfTheWeek ? getDayOfTheWeek(index) : null }}
            </td>
            <td>
              <input type="time" class="form-control" id="time_slot1_start" v-model="getTimeSlot1Start(index)" />
            </td>

而函數getTimeSlot1Start的宣告如下：

methods: {

getTimeSlot1Start (day) {
      return this.openingHours.find(i => i.day === day).time_slot1_start
    },

當我想儲存我的檔案時，eslint告訴我：

錯誤 'v-model'指令需要作為LHS有效的屬性值 vue/valid-v-model

#

為什麼我會收到這個訊息？無法將模型與函數綁定嗎？

Answer 1

v-model指令是雙向綁定的，它接受一個屬性作為值而不是一個方法，你可以使用value屬性和@input事件綁定此方法來編輯指定索引的項目：

<input ...  :value="getTimeSlot1Start(index)" @input="setTimeSlot1Start(index)" />