IE11 上 Vue 的替代语法答案

【问题标题】：Alternative syntax for Vue on IE11IE11 上 Vue 的替代语法
【发布时间】：2019-12-17 23:46:44
【问题描述】：

我在 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 ...

【问题讨论】：

尝试改用id="another_thing_{{index}}">
伴随@Eldar 的评论，问题是Internet Explorer 不支持的模板字符串：developer.mozilla.org/de/docs/Web/JavaScript/Reference/…
这也会产生类似的错误 - 编译模板时出错：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，使用
代替
。 :id=another_thing_{{index}} 也是如此
使用接受索引并返回 ID 的方法，并将其 v-bind 到 id 属性。

【解决方案1】：

通常我会建议在 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;
  }
}

【讨论】：

【解决方案2】：

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()

【讨论】：

让我知道这是否有效，如果无效，我可以将其删除。无法真正检查上述方法并验证它是否适用于您的 Vue 环境，因为我之前没有使用过 Vue。