Início / coding / Perguntas / 79480970
Accepted
paul kendal23
Asked: 2025-03-03 20:27:52 +0800 CST

Vue JS Não é possível obter valores de atributos de dados

  • 772

Estou usando o Vue 3. Não consigo obter valores de conjunto de dados do meu botão:

este é o botão:

  <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

<button id="profile"
         v-on:click="start" :data-id="19876"
         class="profile"
         data-gender="{{$gender}}">
</button>

Este é meu objeto vue:

<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>

Isso retorna o valor nulo.

Eu também tentei isso:

const { id } = event.target.dataset;

Ele retorna valor indefinido.

laravel

3 respostas

  1. Best Answer

    Você está montando o Vue diretamente no #profilebotão, mas o Vue funciona melhor quando montado em um elemento wrapper (por exemplo, a <div>) que contém o botão. Como o próprio botão é a raiz da instância do Vue, o Vue assume e remove os atributos data-*, e é por isso que você não está obtendo os valores esperados.

    Para corrigir isso, envolva seu botão dentro de um e monte o Vue nessa div.

    <script src="https://unpkg.com/[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>

    Leia mais sobre a montagem do Vue nos documentos oficiais

    • 0

  2. se no meu html eu tiver algo assim (um blade.php no meu caso):

    <body>
    <div id="app" data-example="{{ $data }}"></div>
</body>

    Posso acessar esses dados assim nos meus componentes vue:

    const appElement = document.getElementById('app');
const example = JSON.parse(appElement.dataset.example);
    • 0

  3. Mas tudo funciona bem. Você tem erros no seu código. Por exemplo, você chama o startChatmétodo, mas o evento de clique é manipulado por start...
    É assim que deveria ser:

    <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>

    Parque infantil Vue SFC

    • 0

relate perguntas