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组件中创建一个新方法，该方法将返回适当的ID：

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