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

【问题标题】：Vuejs returns [object Object] from data attributeVuejs 从数据属性返回 [object Object]
【发布时间】：2018-02-07 20:22:54
【问题描述】：

我有以下 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 方法，它们都不起作用。

【问题讨论】：

@click="addDetail(person)" 能解决问题吗？
当您尝试记录对象时是否显示[object Object]？
@Nemani 是的，你可以看到 jsfiddle 控制台我只得到[object Object]
@hannesneukermans 不管怎么传人，我总是得到[object Object]输出

标签： javascript json vue.js vuejs2

【解决方案1】：

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

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

https://jsfiddle.net/qthg4Lwm/

希望这会有所帮助:)

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

来自上面的文章

每个属性都是一个字符串，可以读写。在上述 case 设置 article.dataset.columns = 5 会改变该属性到“5”。

【讨论】：

我不知道为什么你的 jsfiddle 不工作。你忘记更新了吗？因为我还是不明白
谢谢。但是你仍然通过person.name 如果我必须按照你的方式做，我需要很多data- 属性。我只想在一个数据属性中传递整个person 对象
正如我的回答中提到的，您不能将对象传递给数据属性，数据属性会将任何传递的值转换为String
您可以将 person 对象传递给 addDetail 函数

【解决方案2】：

您不应该尝试通过事件和 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)
  }
}
...

【讨论】：

【解决方案3】：

只需传递处理程序方法@click 就足够了。有关event handling，请参阅 Vue 参考

模板：

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

JS：

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

【讨论】：

还是一样，和我得到的输出没有区别
我已经编辑了我的答案。通过这样做，您每次点击i 标签时都会得到person 对象。请检查并告诉我

【解决方案4】：

在我的情况下，我在 html（在 v-for 内部）和数据函数中具有相同的 var 名称，并且每次浏览器使用另一个 var...

【讨论】：