VueJS handling dynamic input - vue.js

Question

I have an vs-input with :id=info.tag. How can I change the input value based on the :id tag? Data is dynamic
<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($event, 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(data, tag) {
this.$store.dispatch('user/grabData', {tag})
.then(res => {
//Nice! Set input value based on the tag
})
.catch(error => {
//hmm
})
},
}
}
</script>

Answer 1

I'll assume that each item in information has a field named value
Then you can just change vs-input to this
If you don't have a field name value you can add it
created () {
this.$store.dispatch('user/getInformation').then(this.$$nextTick).then(() => {
this.information = this.$store.state.user.information.map(item => Object.assign({value:''}, item))
})
}

Answer 2

So given vs-input I assume you are using VueSax.
It has v-model property which will line up to the value.
add v-model to vs-input
<vs-input :id="info.tag" v-model="infoInput" placeholder="Data Output" readonly/>
make sure to include property into data
data() {
return {
information: null,
infoInput: '',
}
},
then when you have an event just change the value.
this.infoInput = "new value"
This will update the value in vs-input
More info can be found v-model api