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

时间:2018-04-21 11:09:24

标签: javascript jquery vue.js vue-component vue-router

我目前的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。

1 个答案:

答案 0 :(得分:0)

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