How to bind v-model to methods in Vue.js

Question

I'm learning vuejs(3).

I have this loop:

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

The declaration of function getTimeSlot1Start is as follows:

methods: {

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

When I want to save my file, eslint tells me:

Error 'v-model' directive requires a valid attribute value as LHS vue/valid-v-model

Why do I receive this message? Can't bind model to function?

Answer 1

v-model The directive is two-way binding, it accepts a property as a value instead of a method, you can use the value property and @input Event binding this method to edit the item at the specified index:

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