¿Cómo tomar la identificación de datos de HTML y agregarla a Vue?
<li data-id="01" >List 1<li> <li data-id="02" >List 2<li> <li data-id="03" >List 3<li> mouseEvent() { if ( this.data-id === "01") { // do something } },No entiendo muy bien tus necesidades. Sin embargo, lo escribes más como jQuery. En Vue, la forma típica de escribir es así:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ol v-for="data in dataList" v-on:click="method1"> {{ data.value }} </ol> </div> <script> var app = new Vue({ el: '#app', data: { dataList: [ {value: "List 1",}, {value: "List 2",}, {value: "List 3",}, ] }, methods: { method1: function (e) { // console.log(e); console.log(e.target); } } }) </script> </body> </html>Puede acceder a él a través e.target.attributes['data-id'].nodeValue .
Demostración de trabajo:
const app = new Vue({ el: '#app', data() { return { list: [{ id: '01', name: 'List 1' }, { id: '02', name: 'List 2' }, { id: '03', name: 'List 3' }] } }, methods: { mouseEvent(e) { console.log(e.target.attributes['data-id'].nodeValue); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> <div id="app"> <ul> <li v-for="(item, index) in list" :key="item.id" :data-id="item.id" @mouseover="mouseEvent"> {{item.name}} </li> </ul> </div>