当我的密钥在JSON数据中包含破折号（ - ）时，如何绑定vue.js中的数据？

Question

我的JSON数据如下：

{
    "color-1": "#8888",
    "color-2": "#000"
}

如何将此变量与vue组件的样式标记绑定？
我试图以下列方式使用它，但它不起作用。

<div v-bind:style="{ color: data['color-1'] }"></div>

Answer 1

您通常会直接引用模板中的组件data属性，而不会在this.或data.前加上前缀。在您的情况下，这是一个问题，因为它阻止您使用bracket notation。

您有两种解决方案：

解决方案1：不要将JSON数据直接放在组件data中，将其包装在对象中（例如colors）。这样，在模板中使用colors['color-1']就可以了。

解决方案2：按原样保留数据并编写一个简单的方法来获取组件中的属性，然后从模板中调用它。类似的东西：

methods: {
  getProperty: function (name) {
    return this[name];
  }
}

然后在模板中：

<div v-bind:style="{ color: getProperty('color-1') }"></div>

Answer 2

您可以通过$ data访问所有数据属性：

{ "color-1": $data["color-1"] }

Answer 3

您可以将连字符分隔的属性作为字符串。

<div v-bind:style='{ "color-1": data["color-1"] }'></div>

Docs

Answer 4

有类似的问题。以下是修复方法：

<div v-bind:style="{ color: this['color-1'] }"></div>

Answer 5

找到类似问题的更多详细信息之后，这就是我发现的here

由于v-bind需要JavaScript表达式，因此不能在标识符中使用-。如果您确实要使用-，则可以使用v-bind:src="this['image-src']"，因为this在模板中是可访问的。

希望对您有帮助！