Vue中如何为id绑定内联计算属性

背景

---

有时候我们想要在Vue中为id绑定一个字符串，比如是"index_" + index(第一个"index"是一个字符串，第二个是一个变量)。
问ChatGPT，说Vue中不支持绑定内联的计算属性。以下是ChatGPT的回答。

在Vue中，你可以使用计算属性或者方法来动态生成id属性的值，但是不能直接在模板中使用箭头函数来动态绑定id属性。

以下是两种在Vue中动态生成id属性的常见写法：

使用计算属性：
<template>
  <div>
    <img :id="computedId" /></div>
</template>

<script>
export default {
  data() {
    return {
      index: 1
    };
  },
  computed: {
    computedId() {
      return 'remind_' + this.index;
    }
  }
};
</script>
在上面的示例中，我们定义了一个名为computedId的计算属性，它返回由'remind_'和index组成的字符串。在模板中，我们使用v-bind指令将计算属性的值动态地绑定到img元素的id属性上。

使用方法：
<template>
  <div>
    <img :id="getDynamicId()" />
  </div>
</template>

<script>
export default {
  data() {
    return {index: 1
    };
  },
  methods: {
    getDynamicId() {
      return 'remind_' + this.index;
    }
  }
};
</script>
在上面的示例中，我们定义了一个名为getDynamicId的方法，它返回由'remind_'和index组成的字符串。在模板中，我们使用v-bind指令将方法的返回值动态地绑定到img元素的id属性上。

需要注意的是，箭头函数不能直接在模板中使用，因为箭头函数的this指向的是定义时的上下文，而不是Vue实例。因此，你需要使用计算属性或者方法来动态生成id属性的值。

通过使用计算属性或者方法，你可以在Vue中动态生成id属性的值，并实现根据不同条件生成不同的id。这样可以使代码更加灵活和可维护。

解决方案

---

可以这样绑定一个计算属性，注意最后要调用一下箭头函数，否则绑定的id就是这个箭头函数字符串了。

:id=(() => ‘remind_’ + index)()

<img v-for="(item, index) in remindItems" :id="(() => 'remind_' + index)()" src="@/assets/images/ic_clock.png" />