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

Question

我当前的html代码是：

<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>

但我认为 id 没有改变。

那有什么错误。实际上，我正在寻找要为每个输入字段更改的音译 ID。

我可以通过以下代码更改音译 ID：

<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>

我的vue js代码是：

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);
            }
        }
    }
});

我能够更新音译 ID。

我无法更新输入字段中的 ID。请帮我更新输入字段中的 id。

Answer 1

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