當我的密鑰包含JSON數據中的破折號（ - ）時，如何綁定vue.js中的數據？

Question

我的JSON數據是這樣的：

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

我如何綁定的風格標籤的VUE組件這個變量？
我想以下面的方式使用它，但它不工作。

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

Answer 1

您一般會直接引用它們，而無需前綴this.或data.訪問模板的組件的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

您可以使用連字符分隔的屬性作爲字符串。

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

Docs

Answer 3

您可以通過$數據訪問所有數據屬性：

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