There is an enumeration of the key-values of the object <div v-for="(item, index) in row">...</div> . inside this diva there is an input. How to connect the input value in this input with the parameter of another object? I will explain, for example, in row keys: 'foo', 'bar'; How to make the input value associated with the key 'foo' and 'bar' of object respectively?
Oleg Shleif Oleg Shleif
578 3 14
|
2 answers
You can use the v-model directive to bind data with input.
As a result, the data entered into input , as required, is "connected" with the desired object.
new Vue({ el: '#app', data: { row: [ { value: 'foo', input: '' }, { value: 'bar', input: '' } ] } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="app"> <div v-for="(item, index) in row"> <input type="text" v-model="item.input"> {{ item.value }} - <strong>{{ item.input }}</strong> </div> <hr> <pre>{{ $data | json }}</pre> </div> 
Alexander Igorevich Alexander Igorevich
3,679 one eight 23
- Thank you very much, but this is not exactly what was required ... - Oleg Shleif
|
My decision
new Vue({ el: '#app', data: { row: { 'foo': '', 'bar': '' }, object: {} }, methods: { addObject() { console.log(this.object); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="app"> <div v-for="(item, index) in row"> <input type="text" v-model="object[index]"> </div> <button type="button" @click="addObject">Сохранить</button> <hr> <pre>{{ $data | json }}</pre> </div> Oleg Shleif Oleg Shleif
578 3 14
|