Vue组件模板中v-for循环值未定义问题排查求助

看起来你遇到的问题很典型——循环次数正常说明数组能被访问，但循环变量的属性取不到，大概率是模板插值语法不匹配自定义分隔符或者组件作用域未正确关联全局数组导致的，我帮你拆解下可能的原因和解决办法：

1. 检查模板插值是否匹配自定义分隔符 #

你已经修改了Vue的默认分隔符为['${', '}']，但如果模板里还是用了默认的{{}}来插值循环变量的属性，就会导致解析错误，提示未定义。

错误示例： #

<template>
  <!-- 用了默认分隔符，和你配置的${}不匹配 -->
  <div v-for="price in salePrices" :key="price.name">
    {{ price.name }}
  </div>
</template>

正确示例： #

<template>
  <div v-for="price in salePrices" :key="price.name">
    <!-- 用你配置的${}分隔符 -->
    ${ price.name }
    ${ price.minValue }
    ${ price.maxValue }
  </div>
</template>

2. 确保组件能正确访问到全局的window.search.salePrices #

如果你的组件没有把全局数组注入到自身的作用域中，模板可能无法直接读取window对象的属性，导致循环变量的属性无法正常解析。

解决办法：在组件的data或computed中关联全局数组 #

<script>
export default {
  data() {
    return {
      // 把全局的salePrices赋值给组件内部的data属性
      salePrices: window.search.salePrices
    }
  }
}
</script>

如果全局数组可能动态更新，用计算属性更合适：

<script>
export default {
  computed: {
    salePrices() {
      return window.search.salePrices
    }
  }
}
</script>

3. 检查数组对象的属性名拼写 #

仔细核对模板中使用的属性名和window.search.salePrices里的对象属性是否完全一致，比如你写的maxValue...有没有完整定义？模板里如果写成了${price.maxvalue}（小写v），而实际是maxValue，也会提示未定义。

额外验证小技巧 #

你可以在模板中先输出整个循环变量，确认它是否是预期的对象：

<template>
  <div v-for="price in salePrices" :key="price.name">
    <!-- 先打印整个对象，看是否有预期的属性 -->
    ${ JSON.stringify(price) }
  </div>
</template>

如果能正确输出对象的JSON字符串，那就是属性名拼写或者分隔符的问题；如果输出undefined，那就是组件没正确拿到数组。

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