Question

如何在我的自定义组件中使用变量数组键进行绑定？在以下示例中，如果将componenttype设置为“默认”，则标题必须为“默认设置标题1”，如果将componenttype设置为“访客”，则标题必须为“标题设置为标题1”等。试图以几种方式对它进行插值，但到目前为止没有任何效果。有提示吗？

<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

您通过执行componenttype将:title="item['componenttype'].title"制成字符串。只需:title="item[componenttype].title"

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

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

2 个答案: