Vue.js v-for with v-model

Question

error:'v-model' directives cannot update the iteration variable 'msg' itself vue/valid-v-model

<div v-for="(msg,name) in normal" :key="name">
<input type="text" v-model="msg">
</div>
    <script>
export default{
data(){
normal: {
        position: "bottom",
        message: "",
        open: false,
        timeout: 1500,
      }}}
</script>

data not date

Dan
– Dan

2020-04-07 03:17:45 +00:00
Commented Apr 7, 2020 at 3:17 — Dan
– Dan, Commented Apr 7, 2020 at 3:17

chojnicki · Accepted Answer · 2020-04-07 08:50:06Z

2

You need to edit array/object variable from data directly. While accessing "msg" inside "for" loop you are only getting copy of item value, and not reference to object/array item.

The correct usage will be:

<div v-for="(msg, name) in normal" :key="name">
   <input type="text" v-model="normal[name]">
</div>

edited Apr 7, 2020 at 8:50

answered Apr 6, 2020 at 19:38

chojnicki

3,6921 gold badge26 silver badges35 bronze badges

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

3 Comments

chojnicki Over a year ago

Based on Your code there should be 4 inputs. Type something in normal.message. Input still empty? You need to provide some fiddle for this.

Nico Haase Over a year ago

Please add some explanation to your answer by editing it, such that others can learn from it

kirara Over a year ago

Oops,it's my bad,I typev-model="normal['name']"and make the error

Caro Pérez · Accepted Answer · 2021-12-24 00:25:59Z

0

Try something like this:

   <v-checkbox
        v-for="(value, key, index) in activeDays"
        v-model="activeDays[key]"
        :key="index"
        :label="`${key}`"
        ></v-checkbox>
    
    
    
activeDays: {monday:false, tuesday:false}

answered Dec 24, 2021 at 0:25

Caro Pérez

5384 silver badges6 bronze badges

Collectives™ on Stack Overflow

Vue.js v-for with v-model

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related