Vue：如何在组件绑定中使用变量作为数组键

Question

如何在自定义组件中使用可变数组键进行绑定？在下面的示例中，如果 componenttype 设置为 'default'，标题必须为 'Title 1 for default settings'，如果 componenttype 设置为 'guest'，则标题必须为 'Title 1 for guest settings' 等。我试图以多种方式对其进行插值，但到目前为止没有任何效果。有什么提示吗？

<my-component
    v-for="item in items"
    :id="item.id"
    :title="item['componenttype'].title"     <-- how to interpolate here?
>
</my-component>


...
data() {
   return {
      componenttype: 'default',
      items: [
         { 
            1: {
               default: {
                  title: 'Title 1 for default settings',
               },
               guest: {
                  title: 'Title 1 for guest settings'
               }
            },
            2: {
               default: {
                  title: 'Title 2 for default settings',
               },
               guest: {
                  title: 'Title 2 for guest settings'
               }
            },
         }
      ]
   }
}
...

Answer 1

您的数组当前仅包含一个对象，具有多个嵌套对象。应该是：

items: [
            {
               default: {
                  title: 'Title 1 for default settings',
               },
               guest: {
                  title: 'Title 1 for guest settings'
               }
            },
            {
               default: {
                  title: 'Title 2 for default settings',
               },
               guest: {
                  title: 'Title 2 for guest settings'
               }
            }
      ]

有了这个，以下应该起作用：

<my-component v-for="item in items"
    :title="item[componenttype].title"
/>

Answer 2

您正在通过 :title="item['componenttype'].title" 将 componenttype 变成一个字符串。只要做 :title="item[componenttype].title"

还要检查你的数组语法，那里可能有一些错误

Vue：如何在组件绑定中使用变量作为数组键

Vue: How to use variable as array key in component binding

arrays

string-interpolation

array-key

vue.js