Question

使用vue 2.x和vuetify 1.5x我正在尝试将动态prop名称绑定到vuetify组件。 v-tooltip接受道具的工具提示可以是bottom，right等。通常，传递道具的方式如下：

<v-tooltip bottom></v-tooltip>
//alternatively
<v-tooltip :bottom="true"></v-tooltip>

我想做的是绑定一个可以是任何值的动态值，这是一些无效的选项：

<v-tooltip {{tooltipLocation}}></v-tooltip>
//OR
<v-tooltip v-bind={tooltipLocation: true}></v-tooltip>

这两次尝试在v-tooltip上创建了一个$ attr，但没有传递该道具。

<v-tooltip v-bind={`${tootltipLocation}`: true}></v-tooltip>

这显然是无效的语法

Answer 1

事实证明，可以使用如下计算属性来完成此操作：

computed: {
            dynamicTooltipProps() {
                return {
                    [`${this.tooltipLocation}`]: true
                }
            }

        }

将动态道具绑定到vue组件

1 个答案: