How to bind a v-model with a method in Vue.js

Question

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

And the function getTimeSlot1Start is declared like that:

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' directives require the attribute value which is valid as LHS vue/valid-v-model

Why do I get message? Is it not possible to bind a model with a function?

What's supposed to happen when the user types in the input? What do you want to set? If you do want to set something, you should use a computed with getter and setter. — tao
– tao, Commented Dec 3, 2020 at 19:22

Boussadjra Brahim · Accepted Answer · 2020-12-03 16:57:35Z

2

v-model directive is two-way binding which accepts a property as value not a method, you could bind that method using value attribute @input event to edit the item specified by the index :

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

answered Dec 3, 2020 at 16:57

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind a v-model with a method in Vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related