为什么音译不适用于动态添加输入字段？答案

【问题标题】：Why transliteration not working for dynamically adding input fields?为什么音译不适用于动态添加输入字段？
【发布时间】：2018-10-01 04:21:40
【问题描述】：

对于出现的第一个输入字段，音译工作正常。但是当我添加@addNeWrow 时，会出现输入字段，但音译正在工作。我需要对通过@addNewRow 添加的所有输入字段进行音译

我需要动态添加输入字段。在这种情况下，第一个输入字段的音译是有效的。对于第二个输入字段起音译不起作用。因为音译 id 仅适用于一个输入字段。那么，如何动态更改输入字段的 id 和音译 id？所以，动态添加输入字段的代码是

   <div class="row" v-for="(book, index) in seziure" :key="index">


    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Date </label>
            <input type="date" class="form-control" v-model="book.date" >
        </div>
    </div>
    <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="transliterateTextarea2">
        </div>
    </div>

</div>
<a @click="addNewRow">Add Another </a>

因此，每当我单击添加另一个 @addNewRow 时，我都会获得一个新的输入字段，但音译不起作用。我认为出现问题是因为 id="transliterateTextarea2" 仅适用于一个输入字段。

那么，当我点击@addNewRow 时，我怎样才能更改音译ID。

我的脚本是

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

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

我的音译脚本是

 <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        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 = [ "transliterateTextarea2" ];
        control.makeTransliteratable(ids);
      }
      google.setOnLoadCallback(onLoad);
    </script>

所以，我在这里添加了一个音译id为var ids = [ "transliterateTextarea2" ]; 此 ID 实际上仅适用于第一个输入字段。所以，当我点击@addNewRow 时，会出现一个输入字段，但音译不起作用

所以，当我点击@addNewRow 时，如何动态添加 id。所以，我也可以得到那个输入字段的音译。

请帮我解答一下。

我需要为我添加的每个新输入字段进行音译。

【问题讨论】：

标签： javascript jquery html vue.js vue-component

【解决方案1】：

也许你可以试试Objuect.assign()，你推送到seziure 的对象可能不是反应性的。这只是我的想法，你可以试试。

我错了..哈哈

【讨论】：