<div class="row" v-for="(book, index) in Subsequent" :key="index">
    <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.seizuredetails" id="transliterateTextarea2">
        </div>
    </div>
</div>
<a @click="addNewRow">Add Another</a>
</div>

我在第一个输入框中得到音译。 (第一种情况没问题)

因此，当我点击“添加另一个”时，我可以拥有一个新的输入框。但是在那个音译中不起作用。

我的音译脚本是

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

那么，当点击添加另一个时，我怎样才能给那个输入区域一个新的音译 ID。

请帮我想出解决办法。

最佳答案

基本上你会得到 makeTransliteratable代码并将其放在方法中。之后，您可以对要使其可音译的任何输入调用此类方法。

不过还是有一些陷阱。

第一个是如何判断是否加载了谷歌音译。我正在使用 Promise ( window.googleIsloaded ) 和 await window.googleIsLoaded;在方法内部保证它仅在 加载 google 后执行。

第二个陷阱更糟糕:在音译时，谷歌设置了 <input> 的值。直接，并且在执行时不发出任何事件。由于没有事件，Vue 无法更新 v-model属性(property)。为了克服这个问题，我创建了一个 Proxy拦截对输入的任何调用并在 google 直接设置值时发出输入事件，这允许 Vue 获取更改。缺点是 Proxy API 在 IE 中不可用。

JSFiddle demo here.

更新:

好吧，我想出了一个解决方法在 Vue 支持的所有 IE 版本中工作，并且还能够将它变成一个 Vue custom directive .

所以你所要做的就是添加 v-transliterate="options"到 <input>或 <textarea> , 是 options您的对象或属性包含该特定 <input> 的音译配置/<textarea> .示例:

<input type="text" v-model="somevar" v-transliterate="options">

Demo JSFiddle here.代码:

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
  // Load the Google Transliterate API
  google.load("elements", "1", {
    packages: "transliteration"
  });

  Vue.directive('transliterate', function (el, binding) {
      var control = new google.elements.transliteration.TransliterationControl(binding.value);
      // a getter for each property google transliterate reads and a setter for each it modifies
      var inputOrTextareaProxy = {
          get getAttribute() { return el.getAttribute.bind(el); },
          get addEventListener() { return el.addEventListener.bind(el); },
          get blur() { return el.blur.bind(el); },
          get focus() { return el.focus.bind(el); },
          get tagName() { return el.tagName; },
          get type() { return el.type; },
          get id() { return el.id; },
          get style() { return el.style; },
          get selectionStart() { return el.selectionStart; },
          get selectionEnd() { return el.selectionEnd; },
          get value() { return el.value; },
          set value(v) { el.value = v; el.dispatchEvent(new CustomEvent('input')); },
          get nodeType() { return el.nodeType; },
          get ownerDocument() { return el.ownerDocument; },
          get scrollTop() { return el.scrollTop; },
          set scrollTop(v) { el.scrollTop = v; }
      };
      control.makeTransliteratable([inputOrTextareaProxy]);
  });
</script>

<div id="app">
  <div class="row" v-for="(book, index) in Subsequent" :key="index">
    <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.seizuredetails" v-transliterate="options"> (Type "World." with the dot!) {{ book.seizuredetails }}
      </div>
    </div>
  </div>
  <a @click="addNewRow">Add Another</a>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    Subsequent: [
        {seizuredetails: ''}
    ],
    options: {
      sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage: [google.elements.transliteration.LanguageCode.MALAYALAM],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    }
  },
  methods: {
    addNewRow: function() {
        this.Subsequent.push({seizuredetails: ''})
    }
  }
})

关于javascript - 为什么当我选择第二个输入框时音译不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49892373/