VueJS: How to create v-model value inside object array

Question

I have several input fields like so:

<input type=text" v-model="InputVModel1">
<input type=text" v-model="InputVModel2">

and I want to place these v-model values inside an array of objects, like so:

array = [{id:1,value:InputVModel1},{id:2,value:InputVModel2},..]

What's the best way to achieve this? Is it to use $set in a computed value to 'push' these into the array like:

    computed: {
        computed_array: function(){ 
            object= {"id":1,"value":InputVModel1}
            this.$set(this.array, object) //push them with a for loop
            [..]
        }
    }

Or is there a more elegant way to do this?

Background: I want to use the final array for 'vuedraggable' to change the order of the objects while maintaining other important meta infos for each value.

Shivam Singh · Accepted Answer · 2020-03-25 09:49:42Z

2

new Vue({
  el: '#app',
  
  data: {
    list: [
      { id: 1, value: 'foo' },
      { id: 2, value: 'bar' },
      { id: 3, value: 'baz' } 
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div
    v-for="(record, i) in list"
    :key="i"
  >
    {{ record.id }}
    <input v-model="record.value"/>
    {{ record.value }} <!-- To check if value key is updating in the list -->
  </div>

</div>

PS: Use list (final array) with for vue-draggable.

edited Mar 25, 2020 at 9:49

answered Mar 25, 2020 at 9:44

Shivam Singh

1,7411 gold badge13 silver badges25 bronze badges

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

1 Comment

Dominic Over a year ago

Nice, it seems I was overcomplicating things again. Thank you @Shivam , an upvote and 'accepted' for you. (my upvote doesn't count yet, because I have less than 15 reputation, working on it..)

Collectives™ on Stack Overflow

VueJS: How to create v-model value inside object array

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