如何动态地将 id 提供给我的输入字段，就像我在 vue js html 中的音译 id 一样？

Posted 2023-02-23

【中文标题】如何动态地将 id 提供给我的输入字段，就像我在 vue js html 中的音译 id 一样？

【英文标题】：How to dynamically provide the id to my input field as that of my transliteration id in vue js html?

【发布时间】：2018-09-30 23:46:01

【问题描述】：

我正在做一个项目。在一种情况下，我需要动态添加输入字段。在这种情况下，第一个输入字段的音译是有效的。对于第二个输入字段起音译不起作用。因为音译 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 时，会出现一个输入字段，但音译不起作用

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

请帮我解答一下。

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

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

【问题讨论】：

你可以使用setAttribute

我没有意识到你在使用 vuejs。忽略我的回答。

请帮帮我..

还没有解决？

【参考方案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 ];
  ...

【讨论】：

你能说明一下它是如何工作的吗？当我尝试时，我没有得到。你能说明一下它是如何工作的吗

[Vue 警告]：nextTick 中的错误：“ReferenceError：yourTransliterationInitializingFunction 未定义”

codepen.io/anon/pen/pVJeex查看这个，希望能帮助你理解我的意思。

挂载钩子错误：“TypeError：无法读取未定义的属性‘音译’”

先生，这来了