当数据为空数组时，v-for和v-if无法一起工作

Question

我今天遇到了一个非常愚蠢的问题，只是在这里分享它：

当

v-for和v-if的数据值为[]时，它们不能一起工作。例如：

ts: []

<div v-for="t in ts" :key="t" v-if="ts.length">
  Yes
</div>
<div v-else>
  No
</div>

在codesandbox的此处进行查看。

我们看不到任何内容，甚至没有错误抛出。我也尝试过使用v-if="ts.length > 0"，但它仍然无法呈现任何内容。

Answer 1

不建议将v-for与v-if一起使用。查看官方文档：https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

Answer 2

一种可行的解决方案是像这样将v-if与v-for分开：

<div v-if="ts.length">
  <div v-for="t in ts" :key="t">
    Yes
  </div>
</div>
<div v-else>
  No
</div>

但这对我来说似乎是一个不好的解决方案，而其他人则可以将其用作一个好的解决方案。因为需要同时使用v-for和v-if。这是因为我不喜欢将文件与文件分开，而只需要在表的tr组件中使用。

尽管如此，我们在documentation状态中同意：切勿在与v-for相同的元素上使用v-if。