IE11 上 Vue 的替代语法

Question

我在 vue 中有一个 for 循环

 <div class="inputWrap" v-for="(thing,index) in things">

我想将索引用作 id 的一部分

<input type="checkbox" v-model="another_thing" :id="`another_thing_${index}`">

可以正常使用，但在 IE11 中不行。 IE11 可以接受的替代语法是什么？

当前错误

[Vue warn]: Error compiling template:invalid expression: Invalid character in ...

Answer 1

IE 11 不支持模板文字。您可以使用 + 连接字符串，或者尝试使用 concat() 方法将循环的索引号附加到您的 ID像这样：

<input type="checkbox" v-model="another_thing" :id="another_thing_" + index)> // using +
<input type="checkbox" v-model="another_thing" :id="another_thing_".concat(index)> // using concat()

Answer 2

通常我建议在 JS 逻辑本身而不是在模板中进行字符串连接和操作，这样更容易推理。如果您将方法绑定到 id 属性，您的问题就可以解决：

<div class="inputWrap" v-for="(thing,index) in things">
  <input type="checkbox" v-model="another_thing" :id="getCheckboxId(index)">
</div>

然后您可以在 VueJS 组件中创建一个新方法，returns 适当的 ID：

methods: {
  getCheckboxId: function(index) {
    return 'another_thing_' + index;
  }
}

IE11 上 Vue 的替代语法

Alternative syntax for Vue on IE11

javascript

internet-explorer-11

vue.js