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

Question

I am doing a project. In one case I need to dynamically add input fields. In that case, for the first input field transliteration is working. For the second input field onwards transliteration is not working. Because transliteration id works only for one input field. So, how can I able to change id of input field and transliteration id dynamically? I am beginner in javascript and I am not able to sort out the problem. Please help me.

So, the code for dynamically adding input fields is

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

So, whenever I clicks Add Another @addNewRow I am getting a new input field but transliteration is not working. I think problem arises because id="transliterateTextarea2" works for only one input field.

So, when I click on @addNewRow how can I able to change the transliteration id.

My script is

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

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

My transliteration script is

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

So, here I have added a transliteration id as var ids = [ "transliterateTextarea2" ]; THIS ID is actually working for first input field only. So, when I click @addNewRow, an input field comes but transliteration is not working

So, when I click on@addNewRow how can I dynamically add id's. So, that I can get transliteration for that input fields too.

Please help me to have an answer.

I need transliteration works for, each new input fields i am adding.

Kindly have a help on the same. Hoping for a help

Answer 1

First thing, you are creating non-unique ids, which is just wrong in html. You should use :id="'transliterateTextarea_' + index" . But also your initialization script for transliteration will not register the new input element without rerunning it each time you add an element. Turn your whole transliteration script into a function and in your addNewRow add something like this:

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

And in yourTransliterationInitializingFunction make sure to use the proper id (that's why we pass the parameter there):

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