时间戳

首页 > 解决方案 > Vue无法渲染大括号+值

vue.js - Vue无法渲染大括号+值

问题描述

我的问题很简单，但有点棘手。

我在 v-for, namedfilter中，我想显示item.properties.*value*我:items传递给 vuetify autocomplete 的内容，并且每个循环中的值必须不同，因为所需的信息不一样。换句话说，我想根据我的对象过滤显示的项目。

请注意，这properties是一个具有多个道具的对象，我只想在每个循环中的道具上显示 1。我没有为这个包含多个道具的对象制作任何 v-for

我想在自动完成中显示为列表的道具的名称由一个名为“标签”的变量确定，我在 v-for 中作为道具传递，因此在我的循环组件中看起来像这样label : 'filters.mission'（例如，任务）

（我有一个翻译文件，这就是我们在这里有一个“filters.mission”的原因，因为它全部翻译了，所有的道具）

Here is a simple exemple :

    // imported array from data I want to display, binded as :items="data"
    [
    //..stuff
      properties : {
      "mission": foo,
      "driver": bar,
      "name": baz,
    },
    //..stuff
      properties : {
      "mission": foo2,
      "driver": bar2,
      "name": baz2,
    },
],

在我的循环组件中，我绑定了我的 :items="items" 并且我想在我的 item.label = filters.mission 等时显示像 item.properties.mission 这样的道具

但事情是这样的：

在职的

 {{ item.properties.mission}}  OUTPUT : 'foo', 'foo2'

不工作

 {{ item.properties + label.replace('filters', '') }}

输出：[对象对象].mission

我试图解析label.replace('filters', '')，但它让我出错。我也尝试过字符串化...我应该为我的 :item 对象编写一个 v-for 并过滤内容吗？

 item.properties.filter(
              (prop) => Object.keys(prop) ===  label.replace('filters.', ''))
            )

如果是这样，我应该在哪里过滤我的对象？

提前感谢任何回答这个问题的人！

标签： vue.jsv-for

解决方案

因为item.properties是一个对象，你也可以mission使用item.properties['mission']. 在您的情况下，您可以使用

{{ item.properties[label.replace('filters', '')] }}

推荐阅读