從JSON使用Vue.js

Question

添加屬性元素我使用Vue.js V1，並希望採取一些JSON是這樣的：

{ "class": "foo bar", "max-length": 25 } 

並將其映射到一個元素使是這樣的：

<input type="text" {{ json }} /> 

而且呈現爲：

<input type="text" class="foo bar" max-length="25" /> 

我試圖用這個方法<input type="text" {{ convertJSON(json) }} />其中convertJSON從JSON創建一個字符串。這不起作用。當我用它進行交易時，它會給我提供錯誤「找到駱駝案例屬性」。

Vue可能嗎？

編輯：我想要做到這一點，而不必手動通過每個屬性;我已經知道如何綁定它們。我想知道是否有可能動態地做到這一點。我懷疑它不是但想要檢查。

謝謝。

Answer 1

您可以將屬性對象傳遞給v-bind。這適用於v1和v2。

在你的情況下，假設json是JSON對象：

<input type="text" v-bind="json" /> 

Here's an example fiddle.

Answer 2

此語法很可能會失敗--vue會在呈現html後運行 - 您已經在此處遇到重大html問題，因爲它會嘗試將{{json}}解釋爲html屬性。

但是你可以隨時綁定您的數據

<div v-bind:class="myJson.class" v-bind:max-length="myJson['max-length']"> 
... 

如果您在綁定的一切真正的興趣與一個JSON，你可以簡單地創建一個包裝像

<template> 
    <inputv-bind:class="data.class" v-bind:max-length="data['max-length']"> 
</template> 

，並定義基本輸入組件此處爲單個道具

// .. component definition 
props: ['data'], 
// .. 

Answer 3

只需使用v-bind 。

例如

<input type="text" v-bind:class=[myClass] v-bind:maxlength=[myLength] /> 

data: { 
    myClass: 'foo', 
    myLength: 25 
} 

```

Live Example

Answer 4

可以創建定製的指令，是以JSON作爲參數，並自動打開各鍵值對成arrtibute上元素。