Vue.js 2 v-for 循环没有获取数组元素答案

【问题标题】：Vue.js 2 v-for loop doesn't get array elementVue.js 2 v-for 循环没有获取数组元素
【发布时间】：2021-06-03 16:54:04
【问题描述】：

我正在尝试检查一个元素是否是一个数组。如果为 true，则打印数组的元素，否则打印元素。

我的代码没有打印元素，不知道哪里有问题。

HTML：

<div>
<ul>
<li v-for="(value, i) in testData" :key="i">
<template v-if="Array.isArray(value)">
<div v-for="(element, ind) in value" :key="ind">{‌{ element }}</div>
</template>
<template v-else> {‌{ value }} </template>
</li>
</ul>
</div>

脚本：

export default {   
data() {
return {
testData: {
id: 1,
name: "MyTest",            
data: [1,0.5,5,8],
},}}

我的输出：

{‌{ value }}
{‌{ value }}
{‌{ element }}
{‌{ element }}
{‌{ element }}
{‌{ element }}

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案1】：

您帖子中每个插值表达式的第一个花括号 {‌{ 有一个额外的、不可见的 Unicode 字符。我不确定你是如何创建它的，但它会导致问题。

将大括号 {‌{ 复制粘贴到此 Unicode text analyzer 时，显示有 3 个字符：

{ = U+007B LEFT CURLY BRACKET
= U+200C ZERO WIDTH NON-JOINER ❌ 不应该在这里
{ = U+007B LEFT CURLY BRACKET

使用正确的大括号，您的代码确实可以工作：

new Vue({
el: "#app",
  data() {
    return {
      testData: {
        id: 1,
        name: "MyTest",            
        data: [1,0.5,5,8]
      }
    }
  }
});

<div id="app">
  <ul>
    <li v-for="(value, i) in testData" :key="i">
      <template v-if="Array.isArray(value)">
        <div v-for="(element, ind) in value" :key="ind">{{ element }}</div>
      </template>
      <template v-else>{{ value }}</template>
    </li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：