v-model is not working in vue?

Question

Actually , this is my problem in my real project doing with API . Let me first explain that , I used axios for call api data . That will get json array and each array has the same radio value so I append radio value to each array . Although I want to get changed radio value by v-model , but it is not working . I outputted selected value under radio element . Below I demonstrated like my project code .

var app2 = new Vue({
  el: '#app-2',
  data: {
    list: null
  },
  created: function () {
    var json = [{id:1,name:"B"},{id:2,name:"D"}]
    this.list = json
    this.list.forEach(function (v) {
       v.options = [{ text: 'pacageA' , value: 1},{text: 'pagckaeB',value:2}]
       v.selected = null
    })
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app-2">
  <div v-for="l,ix in list">
     <div v-for="o in l.options">
      <input type="radio" v-model="l.selected" :name="'test'+ix" :value="o.value">
      </div>
          <h3>{{l.selected}}</h3>
  </div>
</div>

tony19 · Accepted Answer · 2022-07-15 22:21:36Z

3

Your problem is a reactivity one. In order for Vue to know about the new object properties you're adding to your list, you should use Vue.set, eg

Vue.set(v, 'options', [{ text: 'pacageA' , value: 1},{text: 'pagckaeB',value:2}])
Vue.set(v, 'selected', null)

Or, as mentioned below, "do all the modifications to json before assigning it to this.list".

edited Jul 15, 2022 at 22:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 25, 2018 at 2:08

Phil

166k25 gold badges265 silver badges269 bronze badges

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

1 Comment

Roy J Over a year ago

Alternatively, do all the modifications to json before assigning it to this.list.

Collectives™ on Stack Overflow

v-model is not working in vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related