Vue.js中v-for循环下动态访问对象属性的问题

你不能用{{ detail.data.temp_cur{{i}} }}这种嵌套插值的写法，Vue中访问动态属性名需要用方括号语法，结合模板字符串拼接属性名来实现。

1. 修正动态属性访问 #

把所有带索引后缀的属性访问改成方括号形式：

• {{ detail.data.temp_cur{{i}} }} → {{ detail.data[temp_cur${i+1}] }}
• {{ detail.data.temp_set{{i}} }} → {{ detail.data[temp_set${i+1}] }}
• {{ detail.data.temp_sl{{i}} }} → {{ detail.data[temp_sl${i+1}] }}

注：这里用i+1是因为v-for的索引i默认从0开始，而你的属性后缀是1、2、3，只要list长度和属性数量对应，这个转换就有效。

2. 修正chart变量的绑定 #

你原来的@click="chart{{i}} = !chart{{i}}"写法同样错误，模板里不能动态拼接变量名。正确做法是把chart定义成数组：
在组件的data选项中：

data() {
  return {
    // 根据list长度初始化对应数量的布尔值
    chart: Array(this.list.length).fill(false),
    detail: { data: {} },
    list: [...]
  }
}

然后模板里的点击事件和dialog绑定改成：

<div class="chart" @click="chart[i] = !chart[i]">차트</div>
<vs-dialog v-model="chart[i]">
  <component :is="`chart0${i+1}`"></component>
</vs-dialog>

这里用<component :is="...">是因为你的图表组件是chart01、chart02这类带后缀的，动态组件可以根据索引拼接组件名来渲染对应图表。

完整修正后的代码示例 #

<div class="temp_section" v-for="(item, i) in list" :key="i">
    <div>{{ item }}</div>
    <div class="curr_temp">{{ detail.data[`temp_cur${i+1}`] }}</div>
    <div class="set_temp">{{ detail.data[`temp_set${i+1}`] }}</div>
    <div class="minus">{{ detail.data[`temp_sl${i+1}`] }}</div>
    <div class="chart" @click="chart[i] = !chart[i]">차트</div>
    <vs-dialog v-model="chart[i]">
        <component :is="`chart0${i+1}`"></component>
    </vs-dialog>
</div>

额外建议 #

如果可以，建议把detail.data的结构改成数组形式，比如：

detail: {
  data: [
    { temp_cur: xxx, temp_set: xxx, temp_sl: xxx },
    { temp_cur: xxx, temp_set: xxx, temp_sl: xxx },
    ...
  ]
}

这样在v-for里直接用detail.data[i].temp_cur会更直观，也能避免动态拼接属性名的麻烦。

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