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

Posted 2023-02-16

【中文标题】Vue.js 2 v-for 循环没有获取数组元素

【英文标题】：Vue.js 2 v-for loop doesn't get array element

【发布时间】：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 

【参考方案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>