在Vue.js中转义双引号

Question

我正在尝试将值绑定到我的组件，但我无法转义双引号。

这是有效的：

<span>{{ config.pages["pageKey"].components[0].display }}</span>

但不是那样：

<MyComponent v-bind:componentConfig="config.pages[\"pageKey\"].components[0]" />

知道怎么做吗？

Answer 1

尝试使用单引号：

<MyComponent v-bind:componentConfig="config.pages['pageKey'].components[0]" />

或：

<MyComponent v-bind:componentConfig='config.pages["pageKey"].components[0]' />

Answer 2

最好的想法是使用"

<MyComponent v-bind:componentConfig="config.pages[&quot;pageKey&quot;].components[0]" />

Answer 3

Property accessors使用点表示法或括号表示法提供对对象属性的访问权限。

使用点符号更简洁：

<MyComponent v-bind:componentConfig="config.pages.pageKey.components[0]" />