Vue无法渲染大括号+值

Question

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

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

请注意，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', '') }}

输出：[对象对象].任务

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

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

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

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

Answer 1

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

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

Vue无法渲染大括号+值

Vue can't render curly brackets + value

vue.js

v-for