CODEWITHSUNDEEP
vue.js
Atousa Darabi
Atousa Darabi

Reputation: 937

How can I change input value in Vue when value is set and update it when it is object of arrays?

I generate so many input boxes on loop of article array. article is array of objects. Input boxes values are set with "value" key in each object.

<div
  v-for="(option, i) in this.article"
  :key="i"
  class="form-row"
  >
     <div class="col">
        <input
           v-model="option.value"
           :label="'label '+i"
           :name="'inputValue'+i"
           type="text"
           required
         />
      </div>
      

</div>
<button @click="submit"></button>

<script>
export default {
    name: 'Article',
    data(){
      return(
        article:[
         {id: 'art1', value: 'artValue1'},
         {id: 'art2', value: 'artValue2'},
         {id: 'art3', value: 'artValue3'}
         // There are about 50 objects
        ]
      )
    },
    methods:{
        submit(){
        // How get values of inputs?
        }
    }
}
</script>

How can I make the value of input change and update the object in vue?

Upvotes: 0

Views: 2152

Answers (2)

Naren
Naren

Reputation: 4480

You forgot to return the object from data function and you can pass option to submit handler and print the input values.

// How get values of inputs? -> Do you mean all of the inputs or input where ever the button clicked or anything else. Below code is to handle individual input and submit handlers

<template>
<div
  v-for="(option, i) in article"
  :key="i"
  class="form-row"
  >
     <div class="col">
        <input
           v-model="option.value"
           :label="'label ' + i"
           :name="'inputValue' + i"
           type="text"
           required
         />
      </div>
      <!-- <button @click="submit(option)">Submit</button> to handle individual inputs -->

</div>
<!-- <button @click="submitAll()">Submit All</button> to handle all inputs -->

</template>
<script>
export default {
    name: 'Article',
    data() {
    return { // you missed this
      article:[
        {id: 'art1', value: 'artValue1'},
        {id: 'art2', value: 'artValue2'},
        {id: 'art3', value: 'artValue3'}
      ]
    }
  },
  methods: {
    submit(option) { // current option
     console.log(option.id, option.value)
    },
   submitAll() {
     console.log(this.article) // which will have update input values as 
    you're using `v-model`, check `values`
   }
  }
}
</script>

Demo Link here

Upvotes: 1

Tim
Tim

Reputation: 1229

I created a sample Single File Component based on your code. Look at my modifications. The 'magic' of Vue reactivity is that the 'article' data is updated in real time as you change the input values.

<template>
  <div class="input-bound-object-array">
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <div class="form-group" v-for="(option, i) in article" :key="i">
            <label>{{ option.id }}</label>
            <input type="text" class="form-control" v-model="option.value"
              required />
          </div>
          <button type="submit" class="btn btn-secondary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        article: [
          { id: 'art1', value: 'artValue1' },
          { id: 'art2', value: 'artValue2' },
          { id: 'art3', value: 'artValue3' }
          // There are about 50 objects
        ]
      }
    },
    methods: {
      submitForm() {
        // 'this.article' is updated as the input values are changed, so at this point
        // you have the data changes, so you can process it as needed, i.e. POST to REST endpoint
        console.log(this.article);
      }
    }

  }
</script>

Upvotes: 1

Related Questions