我有以下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.parse
和String
方法,它们都不起作用。
5条答案
按热度按时间dldeef671#
v-bind:data-identity="person"
将person转换为string,因此无法将对象作为任何对象附加到数据集。toString()方法返回[Object object]
,您将得到相同的结果尝试附加任何字符串(如person.name),并查看它是否反映在数据集中
https://jsfiddle.net/qthg4Lwm/
希望这对你有帮助:)
编辑:所有数据属性均为
string
读取此article来自上一条
每个属性都是一个字符串,可以读写。在上面的例子中,设置article.dataset.columns = 5会将该属性更改为“5”。
xesrikrc2#
您不应该尝试通过事件和DOM访问“person”,而应该给予其作为函数addDetail的参数
模板
脚本
hfsqlsce3#
只需传递handler方法
@click
就足够了,事件处理参见Vue参考模板:
联森:
vfhzx4xs4#
在我的情况下,我有相同的变量名在html(在v-for内部)和数据函数中,每次另一个变量被浏览器使用...
gev0vcfq5#
对于我来说,使用
JSON.stringify()
解决了这个问题:会给予
data-identity="[object object]"
其中:
我会将json/object转换为string,这样就可以工作了
data-identity="{"id":1,"name":"User 1"}"