Vue.js 2 v-for 循环没有得到数组元素

Question

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

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

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],
},}}

MyOtput:

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

Answer 1

post 中每个插值表达式的第一个花括号 {‌{ 有一个额外的、不可见的 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>

Vue.js 2 v-for 循环没有得到数组元素

Vue.js 2 v-for loop doesn't get array element

javascript

vue.js

vue-component

vuejs2

v-for