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

IE11上Vue的替代语法

2 个答案: