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

kpbpu008  于 2023-01-24  发布在  Java
关注(0)|答案(5)|浏览(251)

我有以下jsfiddle example(检查控制台),您将看到的是[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数据,但如果我尝试使用e.target.dataset.identity在函数addDetail()中获取它,那么我得到的只是[object Object]而不是json数据。我尝试过JSON.parseString方法,它们都不起作用。

dldeef67

dldeef671#

v-bind:data-identity="person"将person转换为string,因此无法将对象作为任何对象附加到数据集。toString()方法返回[Object object],您将得到相同的结果
尝试附加任何字符串(如person.name),并查看它是否反映在数据集中
https://jsfiddle.net/qthg4Lwm/
希望这对你有帮助:)
编辑:所有数据属性均为string读取此article

来自上一条

每个属性都是一个字符串,可以读写。在上面的例子中,设置article.dataset.columns = 5会将该属性更改为“5”。

xesrikrc

xesrikrc2#

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

hfsqlsce3#

只需传递handler方法@click就足够了,事件处理参见Vue参考
模板:

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

联森:

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

vfhzx4xs4#

在我的情况下,我有相同的变量名在html(在v-for内部)和数据函数中,每次另一个变量被浏览器使用...

gev0vcfq

gev0vcfq5#

对于我来说,使用JSON.stringify()解决了这个问题:

v-bind:data-identity="person"

会给予data-identity="[object object]"
其中:

v-bind:data-identity="JSON.stringify(person)"

我会将json/object转换为string,这样就可以工作了
data-identity="{"id":1,"name":"User 1"}"

相关问题