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

Question

我有以下 jsfiddle 示例（检查控制台），您将看到的是 [object Object] 而不是 person 数据：

所以，基本上我有一个 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 数据，但是如果我尝试在函数中获取它 addDetail() 与 e.target.dataset.identity 我得到的只是 [object Object] 而不是 json 数据。我试过 JSON.parse 和 String 方法，但没有一个有效。

原文由 hidar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

https://jsfiddle.net/qthg4Lwm/

希望这会有所帮助:)

编辑：所有数据属性都是 string 阅读这篇 文章

从上面的文章

每个属性都是一个字符串，可以读写。在上述情况下，设置 article.dataset.columns = 5 会将该属性更改为“5”。

原文由 Nemani 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您不应该尝试通过事件和 DOM 访问“person”，而是将其作为参数提供给函数 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)
  }
}
...

原文由 reinarg 发布，翻译遵循 CC BY-SA 3.0 许可协议