如何将 v-model 与 Vue.js 中的方法绑定答案

【问题标题】：How to bind a v-model with a method in Vue.js如何将 v-model 与 Vue.js 中的方法绑定
【发布时间】：2020-12-03 16:51:59
【问题描述】：

我正在学习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 有效

为什么我会收到消息？模型不能绑定函数吗？

【问题讨论】：

当用户输入输入时应该发生什么？你想设置什么？如果你确实想设置一些东西，你应该使用computed with getter and setter。

标签： vue.js vuejs3

【解决方案1】：

v-model 指令是双向绑定，它接受属性作为值而不是方法，您可以使用 value 属性 @input 事件绑定该方法以编辑索引指定的项目：

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

【讨论】：