提问人：nidhou gsm 提问时间：10/25/2023 更新时间：10/26/2023 访问量：69
事件目标的显示信息是 KO
display info of event target is ko
问：
我有一个带有 id 和 name 的按钮，我想显示它们的值，但在我的代码中什么都没有显示。 这是怎么回事？
<v-btn id="mytest" name="test" @click="addNewEntry">{{'add '}}</v-btn>
methods: {
addNewEntry() {
document.getElementById("mytest").addEventListener('click', (event) => {
console.log('id value ' , event.target.id);
console.log('name value ' , event.target.name)
});
},
}
答：
1赞
htor
10/25/2023
#1
你已经有一个事件侦听器附加到你的方法，所以只需执行以下操作：@click="addNewEntry"
methods: {
addNewEntry(event) {
console.log('id value ' , event.target.id);
console.log('name value ' , event.target.name)
},
}
评论
0赞
nidhou gsm
10/25/2023
你能添加一个可运行的例子吗？在我的情况下显示 1 而不是“mytest”并返回 undefined 而不是“test”event.target.idevent.target.name
0赞
nidhou gsm
10/27/2023
解决方案是使用 & 代替event.currentTarget.idevent.currentTarget.nameevent.target.id & event.target.name
0赞
Shinwi
10/25/2023
#2
我建议多读一些关于 vue v-model 和 vue 中的事件处理的信息
但简而言之，当您添加 时，这已经添加了一个事件侦听器，因此不需要在您的方法中添加它。@click='methodName'document.getElementById("mytest").addEventListener(...)
还有一件事，你应该只把变量放在{{}}里面。由于 'add' 在这里是一个常量字符串，那么你可以这样写：'add ' {{ someVariable }}{{'add '}}
话虽如此，您的问题的答案将使用上面提到的一些要点： 在数据中添加变量以存储 id 和 name 的值。并使用 v-model 将该变量与输入值的输入绑定。
data () {
return {
name: ''
}
},
methods: {
addNewEntry() {
console.log('name value ' , this.name)
}
}
并在您的 html 输入中绑定相关值
<input type="text" v-model="name">
<v-btn id="mytest" name="test" @click="addNewEntry">add {{ name }}</v-btn>
0赞
Keyboard Corporation
10/26/2023
#3
使用 and 调用获取按钮的属性。refthis.$refs
对于 vuetify 2
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
addNewEntry() {
console.log('id value', this.$refs.myBTN['$attrs'].id)
console.log('name value', this.$refs.myBTN['$attrs'].name)
},
},
})<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn
ref="myBTN"
id="mytest"
name="test"
@click="addNewEntry()"
>
Add
</v-btn>
</div>
</v-app>
</div>对于 vuetify 3
这是一个演示。
评论
0赞
nidhou gsm
10/27/2023
然而，$ & attrs 是什么意思？或者他们指的是什么？['$'].attrs
0赞
Keyboard Corporation
10/27/2023
这是一个用于确定按钮属性的名称。
0赞
nidhou gsm
10/27/2023
我试图对 p 元素进行测试，但我得到了无法读取未定义的属性<p ref="pa" name="po">hello</p>console.log(this.$refs.pa['$'].attrs.name)
0赞
Keyboard Corporation
10/27/2023
p 是不同的标签使用console.log(this.$refs.pa['__vnode'].props.name)
评论