Vuejs返回的翻譯：從數據屬性

我有以下jsfiddle example（檢查控制檯）和所有你將看到的是[object Object]而不是person數據：Vuejs返回的翻譯：從數據屬性

所以，基本上我有一個vuejs實例和一個div v-for迭代對象

<div id='app'> 
    <p v-for="person in people[0]"> 
    <span> {{ person.name }}</span> 
     <i class="fa fa-check" 
     v-bind:data-identity="person" 
     @click="addDetail($event)"></i> 
    </p> 
</div>

的問題是，如果我贊同{{ person }}我可以看到頁面上的JSON數據，但如果我嘗試用e.target.dataset.identity得到它在功能addDetail()然後我得到的是[object Object]和不json數據。我試過JSON.parse和String方法，但它們都不起作用。

來源

2017-08-30 hidar

會@ click =「addDetail（人）」訣竅？ –

當您嘗試記錄對象時它會顯示'[object Object]？ – Nemani

@Nemani是的，你可以看到jsfiddle控制檯我只能得到'[object Object]' – hidar

v-bind:data-identity="person"羽人字符串，因此你不能將對象附加到數據集任何object.toString（）方法返回[Object object]，你會得到相同的

嘗試附加任何字符串，如person.na我，看看它是否會反映在數據集中

https://jsfiddle.net/qthg4Lwm/

希望這將有助於:)

編輯：所有的數據屬性string 閱讀本article

從上述文章

每個屬性都是一個字符串a nd可以讀寫。在上面的案例設置article.dataset.columns = 5會將該屬性更改爲「5」。

來源

2017-08-30 08:37:11 Nemani

我不知道爲什麼你的jsfiddle不工作。你忘了更新它嗎？因爲我還不明白 – hidar

@hidar我已經添加了一個'debugger'，試試這個鏈接：https://jsfiddle.net/qthg4Lwm/3/ – Nemani

謝謝。但是如果我必須按照自己的方式進行操作，那麼您仍然在傳遞'person.name'，我需要許多'data-'屬性。我只想在整個'person'對象中傳遞一個數據attr – hidar

只要通過處理程序方法@click就足夠了。見event handling

模板Vue的參考：

<i class="fa fa-check" @click="addDetail(person)"></i>

JS：

methods: { 
    addDetail: function (person) { 
    console.log(person); 
    } 
}

來源

2017-08-30 08:07:05

它仍然是一樣的，沒有從輸出的差異我越來越 – hidar

我編輯了我的答案。通過這樣做，您每次點擊'i'標籤時都會獲得人物對象。請檢查並讓我知道 –

你不應該嘗試訪問「人」通過事件和DOM，但把它作爲參數傳遞給函數addDetail

模板

<div id='app'> 
    <p v-for="person in people[0]"> 
    <span> {{ person.name }}</span> 
     <i class="fa fa-check" 
     @click="addDetail(person)"></i> 
    </p> 
</div>

腳本

... 
methods: { 
    addDetail: function(person){ 
    console.log(person) 
    } 
} 
...

來源

2017-08-30 09:19:33 reinarg

這是應該如何完成的。 – Bert

Vuejs返回的翻譯：從數據屬性

回答

相關問題