Vue js單擊按鈕時動態添加文本框時綁定動態ID

Question

我能夠在按鈕單擊時動態添加文本框。 我的問題是我無法設置動態ID和值。

<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實例。在單擊添加行按鈕時，它將添加一個新的文本框。但是我不知道為文本框綁定ID和值。

Answer 1

你可以在行數組中傳遞id

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

並在添加新行時傳遞ID

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

Answer 2

您可以rows項目中添加一個id ，並將其用作ID。 但是我假設您正在執行此操作，以便稍后可以檢索輸入值。 有一個更好的方法可以做到這一點。

在父數據對象上定義一個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

好吧，首先，為了識別每個輸入元素，您需要在v-for添加:key attr

為了綁定值，您可以在創建輸入元素時將value和id作為prop傳遞，並將值傳遞給輸入類型的v模型，因此無論何時創建，都可以將其包含在輸入中。

這是JsFiddle

希望這可以幫助！