如何在每个for循环的输入字段中加1的id？

Question

My current html code is:

<div id="app">
   <div class="row" v-for="(book, index) in seziure" :key="index">
      <div class="col-md-8">
         <div class="form-group label-floating">
            <label class="control-label"> Details</label>
            <input type="text" class="form-control" v-model="book.details" id="'transliterateTextarea'+(index+1)">
         </div>
      </div>
   </div>
   <a @click="addNewRow">Add Another</a>
</div>

But I think id is not changing.

What is the error in that. Actually I am looking for transliteration id's to be changed for each input fields.

I am able to change transliteration ids by the following code:

<script type="text/javascript">
    function transliterateInit(idNo) {
        // Load the Google Transliterate API
        google.load("elements", "1", {
            packages: "transliteration"
        });

        var options = {
            sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage: [google.elements.transliteration.LanguageCode.MALAYALAM],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        var ids = ["transliterateTextarea" + idNo];
        control.makeTransliteratable(ids);
    }
</script>

My vue js code is:

addForm = new Vue({
    el: "#addForm",
    data: {
        seziure: [{
            details: null,

        }, ],
        mounted: function () {
            transliterateInit(1);
        },
        methods: {
            addNewRow: function () {
                this.seziure.push({
                    date: null,
                    details: null
                });
                transliterateInit(this.seziure.length);
            }
        }
    }
});

I have able to update transliteration id's.

I AM NOT ABLE TO UPDATE ID's in the input fields. Please help me to update id's in the input field.

Answer 1

您需要将transliterateTextarea数据放入Vue实例的数据中。