Vue：从一个属性

Question

我从数据中的数组创建视图列表 link，但是可以将 :to 属性绑定到对象中的项目吗？东西 link 这个

<v-list-tile v-else @click="" :to="{name: '{{item.componentName}}'}" :key="item.text">
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

Answer 1

v-bind 中的任何内容都应该是有效的 Javascript 表达式

在这种情况下，它应该只是一个有效的 Javascript 对象

:to="{name: item.componentName}"

Answer 2

您的问题是您试图在 v-bind 表达式中进行变量插值（{{item.componentName}} 部分）。不支持。

相反，您可以使用任何有效的 JavaScript 表达式，它会自动检测组件级数据范围（即使在 v-for 循环中！）。例如，您想要的表达式应该是这样的：

:to="{name: item.componentName}"

如 v-for 所述，以下玩具示例也有效：

<div v-for="(item, item_index) in itemsArray">
    <my-component :myProp="{name: item.componentName, position: item_index}"></my-component>
</div>

仅当您尝试在 v 绑定之外呈现某些值时才需要插值，例如显示一些文本：

<div>{{item.componentName}}</div>

Vue：从一个属性

Vue :to from a properties

vue.js

vue-router

vuetify.js