Vue js Привязка динамического идентификатора при динамическом добавлении текстового поля при нажатии кнопки

Question

Я могу добавить текстовое поле динамически при нажатии кнопки.Моя проблема в том, что я не могу установить динамический идентификатор и значение.

<div id="app">
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
        <div v-for="row in rows">
            <button-counter></button-counter>
        </div>
    </div>       
    <script>    
        Vue.component('button-counter', {
            template: '<input type="text" style="margin-top: 10px;" ><br>'
        })    
        var app = new Vue({
            el: "#app",
            data: {
                rows: [],
                count:0              
            },
            methods: {
                addRow: function () {
                    var txtCount=++this.count;
                    id='txt_'+txtCount;
                    this.rows.push({ title: "first", description: "textbox1" });
                }
            }
        });

    </script> 


  This is my code.

Я создал компонент для ввода и создал один экземпляр vue. При нажатии кнопки «Добавить строку» будет добавлено новое текстовое поле. Но я не знаю, чтобы связать идентификатор и значение для текстового поля.

Answer 1

Вы можете передать идентификатор в массиве строк

<div v-for="row in rows" :id=row.id>
  <button-counter></button-counter>
</div>

И передать идентификатор при добавлении новой строки

this.rows.push({ title: "first", description: "textbox1", id });

Answer 2

Вы можете добавить id в элемент rows и использовать его в качестве идентификатора.Но я предполагаю, что вы делаете это, чтобы позже вы могли получить входное значение.Есть лучший способ сделать это.

Определить объект values в родительском объекте данных.Например:

data: {
  rows: [],
  values: {},
  count:0              
},

Каждый раз, когда вы добавляете новую строку, добавляете к ней реактивное свойство:

addRow: function () {
  var txtCount=++this.count;
  id='txt_'+txtCount;
  this.rows.push({ title: "first", description: "textbox1"});
  this.$set(this.values, id, '')
},

Определите value опору для вашего пользовательского компонента и создайте input событие каждый раз, когда значение меняется.Подготовка вашего пользовательского компонента к приему v-model

Vue.component('button-counter', {
 props: ['value'],
 template: '<input type="text" @input="$emit(\'input\', 
  arguments[0].srcElement.value)" style="margin-top: 10px;" ><br>'
}) 

Привязка каждого пользовательского компонента к правильному v-model

<button-counter v-model='values[row.id]'></button-counter>

Теперь у вас есть доступ ко всем входным значениям в values в родительском компоненте.

Вот рабочий jsfiddle .

Кстати: вы получаете ошибку, потому что ваш пользовательский компонент имеет несколько корней.Вам нужно либо удалить br, либо добавить элемент обтекания.

Answer 3

Ну, сначала, чтобы идентифицировать каждый элемент ввода, нужно добавить :key attr к v-for

и для привязки значения вы можете передать значение и идентификатор в качестве реквизита при создании элемента ввода и передать значение v-модели типа ввода, чтобы при каждом его создании вы могли иметь его внутри ввода.

Вот JsFiddle

Надеюсь, это поможет!