vue.js 的 v-for 中的条件？

Posted 2023-02-16

【中文标题】vue.js 的 v-for 中的条件？

【英文标题】：Condition in v-for of vue.js?

【发布时间】：2018-05-31 09:15:04

【问题描述】：

我想避免下面代码中的image 值。image 是property 的键。我该怎么做？

<tbody>
    <tr v-for="obj in data" :id="obj.id">
       <td v-for="property in obj">property</td>
    </tr>
</tbody>

【问题讨论】：

我不太确定你在问什么。你想做什么？不为任何具有图像的对象创建td？

感谢@HEATH3N 的回复。 property 中有不同的值。但我不想打印image 属性的值。

property 是一个对象吗？因为您调用property.image 的方式表明确实如此。

不，property 是一个值。我正在更新我的问题。我不知道该怎么做，所以我打电话给property.image。谢谢

我投票决定将此问题作为离题结束，因为在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供问题本身中的 Minimal, Complete, and Verifiable example。

【参考方案1】：

Accepted 答案是一种反模式，因为您不应该在 VueJs 2+ 中的同一节点上混合 v-for 和 v-if，正如 Thomas van Broekhoven 指出的那样。相反，您可以将过滤器链接到对象上。这是一个使用 ES6 箭头函数的示例，应该*工作。

未经测试的语法。在床上用手机打字。

<tbody>
    <tr v-for="obj in data" :id="obj.id">
       <td v-for="property in obj.filter(property => property !== 'image')">property</td>
    </tr>
</tbody>

【讨论】：

eslint-plugin-vue 错误，'v-for' directives require that attribute value.

【参考方案2】：

让我们看看：v-for with an Object，v-for with v-if。

<td v-for="(value, property) in obj" v-if="property!='image'">
    value
</td>

【讨论】：

感谢@Ben 的回复。我试过这样<td v-for="property in obj" v-if="!property.image">property</td>。但它不起作用。谢谢

同时检查vuejs.org/v2/guide/list.html#v-for-with-an-Object

我想你应该试试<td v-for="(value, property) in obj" v-if="property!='image'">value</td>

^ 这很有效，而且比我一团糟的答案要好得多。

请注意，不建议同时使用 v-if 和 v-for。有关详细信息，请参阅样式指南。 (vuejs.org/v2/guide/list.html#v-for-with-v-if)