javascript - Vuejs 从数据属性返回 [object Object]

Question

我有以下 jsfiddle example (检查控制台)你将看到的是 [object Object]而不是 person数据:

所以，基本上我有一个 vuejs 实例和一个 v-for 的 div迭代一个对象

<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 数据，但是如果我尝试在函数 addDetail() 中获取它与 e.target.dataset.identity那么我得到的就是[object Object]而不是 json 数据。我试过JSON.parse和 String方法，它们都不起作用。

Answer 1

v-bind:data-identity="person" 将人转换为字符串，因此您无法将对象附加到数据集 因为任何 object.toString() 方法都会返回 [Object object] 而你得到的是相同的

尝试附加任何字符串，如 person.name 并查看它是否反射(reflect)在您的数据集中

https://jsfiddle.net/qthg4Lwm/

希望这会有所帮助:)

编辑:所有数据属性都是 string 阅读此 article

来自上面的文章

Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".