Vue中如何跨不同v-for循环访问数据实现条件样式

你在第一个v-for里定义的value作用域仅限制在对应的<tr>及其子元素内部，出了这个<tr>到汇总行区域就无法直接访问了，你可以用以下几种方案实现需求：

方案1：用计算属性提前聚合需要对比的数值（最推荐，性能最好） #

如果你是要把所有manager的qty聚合后（比如求和、取最大值）和store的qty对比，直接写计算属性预处理数据即可：

// 示例为取所有manager的qty总和，可根据需求修改聚合逻辑
computed: {
  aggregatedManagerQty() {
    return Object.values(this.managerNumbers).reduce((total, value) => {
      return total + (value.qty || 0)
    }, 0)
  }
}

汇总行直接使用这个计算属性判断样式即可，同时注意修正你原来的HTML语法错误（<tr>的子元素只能是<th>/<td>，不能直接放<div>）：

<tr>
  <th>Summary</th>
  <th 
    v-for="store in activeStore" 
    :key="store.id" <!-- 建议用唯一id做key，不要用整个store对象 -->
    :style="{ background: aggregatedManagerQty > store.qty ? '#000' : '#fff' }"
  >
    @{{ store.stock_num }}
  </th>
</tr>

方案2：渲染第一个v-for时存储value到实例，供后续使用 #

如果你确实需要把每个manager的原始value都存下来后续对比，可以在渲染阶段调用方法存值：
首先在data里定义存储数组，并且监听managerNumbers变化清空旧值避免重复：

data() {
  return {
    managerValueList: []
  }
},
watch: {
  managerNumbers: {
    handler() {
      this.managerValueList = []
    },
    immediate: true,
    deep: true
  }
},
methods: {
  saveManagerValue(value) {
    // 用唯一标识判断避免重复添加
    const existed = this.managerValueList.find(item => item.managerId === value.managerId)
    if (!existed) this.managerValueList.push(value)
    // 返回空值不影响元素属性渲染
    return ''
  }
}

然后在第一个v-for的tr上调用该方法：

<tr 
  v-for="(value, manager) in managerNumbers" 
  :key="manager"
  :data-temp="saveManagerValue(value)"
>
  <!-- 原有td内容不变 -->
</tr>

汇总行就可以直接使用managerValueList里的所有value做对比，比如取最大值和store.qty对比：

<th 
  v-for="store in activeStore" 
  :key="store.id"
  :style="{ background: Math.max(...managerValueList.map(i => i.qty || 0)) > store.qty ? '#000' : '#fff' }"
>
  @{{ store.stock_num }}
</th>

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