时间戳

首页 > 解决方案 > Vue.js 2 v-for 循环没有获取数组元素

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

问题描述

我正在尝试检查元素是否为数组。如果为 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 }}

标签： javascriptvue.jsvuejs2vue-componentv-for

解决方案

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

将大括号复制粘贴{‌{到此Unicode 文本分析器中时，它显示有 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>

推荐阅读