No sé por qué, pero se sigue mostrando este error . Se accedió a la propiedad 'myfunc' durante el procesamiento, pero no está definida en la instancia . Estoy compartiendo mi código Html y js.
const ListRenderingApp = { data() { return { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }, method : { myfunc(){ console.log('drats') } } } Vue.createApp(ListRenderingApp).mount('#list-rendering')Y el código de los archivos Html es
<div id="list-rendering" class="demo"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <button v-on:click="myfunc"> Click me</button> </div>Soy muy nuevo en Vue.js. Entonces, si alguien puede ayudarme con esta pregunta.
Entendí el error. Y se le ocurrió la solución también.
En primer lugar, en ListRenderingApp después de la función de datos. Deberían ser methods . Y en segundo lugar, en la instrucción console.log() debería ser console.log(this.todos) .
Demostración de trabajo:
new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] }, methods : { myfunc() { console.log('drats') } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <button v-on:click="myfunc"> Click me</button> </div>