[Vuejs]-Extracting dynamic data from inputs into string

by

1👍

✅

You can use a computed to join your values like this:

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    },
    computed: {
        mergedValues() {
          return this.inputValues.map(v => v.value).join('');
        }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    {{mergedValues}}
</div>

Or better you could just iterate over the array in your template.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    <p v-for="item in inputValues">
      {{item.value}}
    </p>
</div>

Also you do not need to do this.inputValues in your template you can just do this : inputValues.

👤Pierre Said

0👍

Trying something like this. This code has not been tested, it is just sort of like psuedocode if it does not work

<input v-for="($event, index) in inputValues" :key="item.id" v-on:keyup.enter="save(even, item)" />

And then in the save method you have something like

save(event, item) {
 this.inputValues[index].value = event.value;
}
👤Tsepo Nkalai

Leave a comment