如何在vue js html中動態地向我的輸入字段提供ID作為我的音譯ID的ID？

Question

我正在做一個項目。 在一種情況下，我需要動態添加輸入字段。 在這種情況下，對於第一個輸入字段，音譯是有效的。 從第二個輸入字段開始，音譯不起作用。 因為音譯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>

因此，每當我單擊添加另一個@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時，輸入字段出現，但音譯不起作用

因此，當我單擊on @ addNewRow時，如何動態添加ID。 因此，我也可以為該輸入字段獲得音譯。

請幫我一個答案。

我需要為每個要添加的新輸入字段進行音譯工作。

請在相同的幫助。 希望有所幫助

Answer 1

首先，您要創建非唯一ID，這在html中是錯誤的。 您應該使用:id="'transliterateTextarea_' + index" 。 但是，用於音譯的初始化腳本也不會在每次添加元素時不重新運行它而注冊新的輸入元素。 將整個音譯腳本變成一個函數，然后在addNewRow添加如下內容：

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

並在您的yourTransliterationInitializingFunction確保使用正確的ID（這就是我們在此處傳遞參數的原因）：

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