Vue中如何处理API返回的字符串/数组并在v-for中正确渲染？

针对你遇到的API返回item.value有时是字符串、有时是数组的情况，可以通过两种方式实现需求：

方法一：模板内直接判断并嵌套循环 #

直接在模板中判断值的类型，数组则嵌套遍历渲染每个元素，字符串直接显示：

<div class="values" v-for="(item, index) in charges" :key="index">
  <div>
    <!-- 数组类型：遍历每个元素，每行显示一个 -->
    <div v-if="Array.isArray(item.value)" v-for="(val, idx) in item.value" :key="idx">
      {{ val }}
    </div>
    <!-- 字符串类型：直接显示 -->
    <span v-else>{{ item.value }}</span>
  </div>
</div>

注：外层的div是块级元素，嵌套的div会自动换行，刚好符合你要的每行一个元素的格式。

方法二：通过计算属性统一处理数据 #

把所有item.value统一转换成数组格式，模板只需一次循环，逻辑更清晰：

脚本部分： #

export default {
  // ...其他选项
  computed: {
    processedCharges() {
      return this.charges.map(item => ({
        ...item,
        // 非数组则包装成数组，保持数据格式统一
        value: Array.isArray(item.value) ? item.value : [item.value]
      }))
    }
  }
}

模板部分： #

<div class="values" v-for="(item, index) in processedCharges" :key="index">
  <div>
    <div v-for="(val, idx) in item.value" :key="idx">
      {{ val }}
    </div>
  </div>
</div>

这种方式将数据处理逻辑从模板中剥离，更符合Vue的开发规范，也方便后续对数据的复用和维护。

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