Vue.js中v-tab绑定动态id时如何给变量拼接固定字符串后缀

方案1：使用+运算符直接拼接 #

直接在动态绑定的表达式中将变量和固定字符串用加号拼接即可，修改后的代码如下：

<v-tab 
  v-for="type in searchTypes" 
  :id="type.value + '_tab'" 
  :key="type.value" 
  @click="getSelectValue(type.value)"
>

如果你的key需要和id保持一致，也可以同步修改key为:key="type.value + '_tab'"，只要保证key的唯一性即可。

方案2：使用ES6模板字符串拼接 #

如果拼接逻辑更复杂，推荐用可读性更高的模板字符串写法，注意模板字符串本身需要用反引号包裹：

<v-tab 
  v-for="type in searchTypes" 
  :id="`${type.value}_tab`" 
  :key="type.value" 
  @click="getSelectValue(type.value)"
>

可选复用方案 #

如果多个地方都需要用到这个拼接后的id，可以把逻辑封装为方法调用：

1. 先在组件的methods中定义拼接方法：

methods: {
  getTabId(val) {
    return `${val}_tab`
  }
}

2. 模板中直接调用方法即可：

<v-tab 
  v-for="type in searchTypes" 
  :id="getTabId(type.value)" 
  :key="type.value" 
  @click="getSelectValue(type.value)"
>

内容的提问来源于stack exchange，提问作者Timothy Clotworthy