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

Posted 2023-02-23

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

【英文标题】：How can I add id by 1 for input field in each for loop?

【发布时间】：2018-10-01 23:13:06

【问题描述】：

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

【问题讨论】：

使用v-bind绑定id。所以把id="'transliterateTextarea'+(index+1)改成v-bind:id="'transliterateTextarea'+(index+1)"

未捕获的错误：makeTransliteratable 中的异常：在 Xy.Q.ij (transliteration.I.js:323) 在 transliterateInit 的 Yy (transliteration.I.js:178) 的无效元素 id transliterateTextarea2 (offencedetails: 604) at Vue$3.addNewRow (offencedetails:672) at boundFn (vue.js:167) at HTMLAnchorElement.invoker (vue.js:1732)

这是错误来了。意思是输入字段中不存在 transliterateTextarea2

请帮帮我..

【参考方案1】：

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

【讨论】：

先生你能帮我..如何实现答案..请帮忙

有个小问题，你把methods属性放在data属性里，你应该把methods属性放在Vue实例中。

你能告诉先生吗..我没有得到..我试过了，请帮忙