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

只需传递处理程序方法@click即可。请参阅event handling

的Vue参考

模板：

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

JS：

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

Answer 2

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

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

https://jsfiddle.net/qthg4Lwm/

希望这会有所帮助：）

编辑：所有数据属性均为string 阅读此article

来自上篇文章

每个属性都是一个字符串，可以读写。在上面大小写设置article.dataset.columns = 5将更改该属性到＆＃34; 5＆＃34;。

Answer 3

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

Answer 4

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

Vuejs从data属性返回[object Object]

4 个答案: