Javascript 如何在vue js html中动态地向我的输入字段提供我的音译id的id？

我正在做一个项目。在一种情况下，我需要动态添加输入字段。在这种情况下，对于第一个输入字段，音译正在工作。对于第二个输入字段，音译不起作用。因为音译id只适用于一个输入字段。那个么，我怎样才能动态地更改输入字段的id和音译id呢？我是javascript的初学者，无法解决问题。请帮帮我

因此，动态添加输入字段的代码是

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

我的音译是

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 id=[transliterateTextarea2]； 此ID实际上仅适用于第一个输入字段。所以，当我点击@addNewRow时，一个输入字段出现，但音译不起作用

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

请帮我回答

我需要音译的作品，每一个新的输入领域，我添加

---

请在这方面提供帮助。希望得到帮助

首先，您正在创建非唯一ID，这在html中是错误的。您应该使用：id='transliterateTextarea\'+索引。但是，您的音译初始化脚本也不会注册新的输入元素，除非每次添加元素时都重新运行它。 将整个音译脚本转换为函数，并在addNewRow中添加如下内容：

this.seziure.push({ date: null, details: null, });
this.$nextTick(()=>{yourTransliterationInitializingFunction(this.seziure.length)})

在您的TranslationInitializing函数中，请确保使用正确的id，这就是我们在此处传递参数的原因：

function yourTransliterationInitializingFunction(idNo){
  ...
  var ids = [ "transliterateTextarea_" + idNo ];
  ...
}

---

您可以使用SetAttribute我不知道您使用的是vuejs。忽略我的答案。请帮助我…仍然没有解决？你能展示一下它是如何工作的吗。当我尝试的时候，我没有得到。你能展示一下它是如何工作的吗[Vue warn]：下一步中的错误检查：ReferenceError:你的TranslationInitializing函数没有定义检查这一个，我希望它能帮助你理解我的意思。挂载钩子中的错误：TypeError:无法读取undefinedsir的属性“Translation”，马上就到了