I am using Vue 3 . I am unable to get dataset values from my button:
this is the button:
<script src="/[email protected]/dist/vue.global.js"></script>
<button id="profile"
v-on:click="start" :data-id="19876"
class="profile"
data-gender="{{$gender}}">
</button>
This is my vue object:
<script>
Vue.createApp({
data() {
return {
state: null,
};
},
mounted() {
console.log(this);
},
methods: {
startChat(event){
// const { id } = event.target.dataset;
var id = event.target.getAttribute('data-id');
console.log(id);
},
}
}).mount('#profile');
</script>
This return the value null.
I also tried this:
const { id } = event.target.dataset;
It return value undefined.
I am using Vue 3 . I am unable to get dataset values from my button:
this is the button:
<script src="https://unpkg/[email protected]/dist/vue.global.js"></script>
<button id="profile"
v-on:click="start" :data-id="19876"
class="profile"
data-gender="{{$gender}}">
</button>
This is my vue object:
<script>
Vue.createApp({
data() {
return {
state: null,
};
},
mounted() {
console.log(this);
},
methods: {
startChat(event){
// const { id } = event.target.dataset;
var id = event.target.getAttribute('data-id');
console.log(id);
},
}
}).mount('#profile');
</script>
This return the value null.
I also tried this:
const { id } = event.target.dataset;
It return value undefined.
Share Improve this question asked Mar 3 at 12:27 paul kendal23paul kendal23 3132 gold badges4 silver badges15 bronze badges 03 Answers
Reset to default 0You're mounting Vue directly on the #profile button, but Vue works best when mounted on a wrapper element (for example a <div>) that contains the button. Since the button itself is the root of the Vue instance, Vue takes over and removes the data-* attributes, which is why you're not getting the expected values.
To fix it, wrap your button inside a and mount Vue on that div instead.
<script src="https://unpkg/[email protected]/dist/vue.global.js"></script>
<div id="app">
<button id="profile"
v-on:click="startChat"
:data-id="19876"
class="profile"
data-gender="male">
Click Me
</button>
</div>
<script>
Vue.createApp({
methods: {
startChat(event){
// const { id } = event.target.dataset;
var id = event.target.getAttribute('data-id');
console.log(id);
},
}
}).mount('#app'); // Mount Vue here
</script>
Read more about mounting Vue on the official docs
if in my html i have something like this (a blade.php in my case):
<body>
<div id="app" data-example="{{ $data }}"></div>
</body>
I can access those data like this in my vue components:
const appElement = document.getElementById('app');
const example = JSON.parse(appElement.dataset.example);
But everything works fine. You have errors in your code. For example, you call the startChat method, but the click event is handled by start...
This is how it should be:
<script setup>
import { ref } from 'vue'
const id = ref();
const start = $event => id.value = $event.target.dataset.id
</script>
<template>
{{ id }}
<button @click="start" data-id="19876">Start</button>
</template>
Vue SFC Playground
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745094581a4610898.html
评论列表（0条）