Handling dynamic inputs in vuejs

Question

Creating new question, trying to explain it better.

What I'm trying to achieve is, when specific button attached to the card is pressed I only want to change data in the same card (based on the tag value). If I would use v-model then it changes data for all of the other inputs as well which I'm trying to avoid. How should I handle this dynamic data to be able to only make it show data for the specific card. I hope it makes sense

<template>
  <vs-row vs-type="flex" vs-justify="space-around">
    <div v-for="info in information" :key="info.id">
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="3">
        <vx-card :title="info.user_1" :subtitle="info.desc">
          <div slot="footer">
            <vs-row vs-justify="center">
              <vx-input-group class="mb-base">
                <vs-input :id="info.tag" placeholder="Data Output" readonly />
                <br>
                <div class="text-center">
                  <vs-button color="primary" @click="grabData(generator.tag)">Grab data</vs-button>
                </div>
              </vx-input-group>
            </vs-row>
          </div>
        </vx-card>
      </vs-col>
    </div>
  </vs-row>
</template>

<script>
    export default {
        data() {
            return {
                information: null
            }
        },
        created () {
            this.$store.dispatch('user/getInformation').then(this.$$nextTick).then(() => {
                this.information = this.$store.state.user.information
            })
        },
        methods: {
            grabData(tag) {
                this.$store.dispatch('user/grabData', {tag})
                .then(res => { 
                    //Nice! Set input value based on the tag
                })
                .catch(error => {
                    //hmm
                })
            },
        }
    }
</script>

Is generator.tag different for each item? Are you sure it's defined? It's used in the template but not shown in the instance. — Dan
– Dan, Commented Apr 11, 2020 at 4:07

tony19 · Accepted Answer · 2020-04-12 06:31:46Z

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>

Collectives™ on Stack Overflow

Handling dynamic inputs in vuejs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related