[Vuejs]-Handling dynamic inputs in vuejs

by

1👍

✅

The symptom you’re describing suggests that you’re binding v-model to the same variable for all iteration items. To address this, you could attach a unique prop to each array item. Specifically, you could map the data received from the API into a new object that contains an extra prop to hold the value of the input.

For example, attach inputValue to each item (1), and bind that to vs-input‘s value (2). Also pass the iterator item to grabData() so that you could set that item’s inputValue prop (3).

<template>
  <vs-row>
    <div v-for="info in information" :key="info.id">
      <vs-input :value="info.inputValue" /> <!-- (2) -->
      <vs-button color="primary" @click="grabData(item /* 3 */, generator.tag)">Grab data</vs-button> <!-- (3) -->
    </div>
  </vs-row>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('user/getInformation').then(() => {
      this.information = this.$store.state.user.information.map(x => ({...x, inputValue: ''})) // (1)
    })
  },
  methods: {
    grabData(item /* 3 */, tag) {
      this.$store.dispatch('user/grabData', { tag })
        .then(res => {
          item.inputValue = tag // (3)
        })
    },
  }
}
</script>
👤tony19

Leave a comment