Home  >  Q&A  >  body text

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

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?

P粉445750942P粉445750942283 days ago405

reply all(1)I'll reply

  • P粉590929392

    P粉5909293922023-11-06 14:55:23

    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)" />

    reply
    0
  • Cancelreply