在 Vue 中单击按钮时尝试添加 1 时遇到问题
我创建了一个函数 sumar,我在分配给按钮的 v-on 中调用它,创建了“contador”但我有一个错误。它说这是空的;我不知道为什么,因为我已经将 props 中的变量 contador 初始化为 0。
<template>
<section class="articulos b-flex b-flex-wrap b-flex-center b-flex-center-horizontal">
<p>{{ contador }}</p>
<article v-for="imagen in imagenes" :key="imagen.id">
<figure class="contenedor-articulo">
<img :src="require(`@/assets/img/${imagen.url}`)" />
<figcaption>
<h3>{{imagen.nombre}}</h3>
<p>+ 0,50 €</p>
<button v-on:click="sumar"><i class="fas fa-plus-circle"></i></button>
</figcaption>
</figure>
</article>
</section>
</template>
<script>
export default {
name: 'Articulos',
props: {
contador: 0
},
data() {
return {
imagenes: [
{id:1, url:"apeteat_2019_ensaladaquinoachicken.jpg", nombre: "Ensalada quinoa chicken"},
{id:2, url:"apeteat_2017__ensaladilla_rusa.jpg", nombre: "Ensaladilla rusa"},
{id:3,url:"apeteat_2018_nigirimix.jpg", nombre: "Niguiri mix"},
{id:4, url:"apeteat_2019_wrapcesar.jpg", nombre: "Wrap cesar"},
{id:5, url:"apeteat_2019_ensaladaquinoachicken.jpg", nombre: "Ensalada quinoa chicken"},
{id:6, url:"apeteat_2018_nigirimix.jpg", nombre: "Niguiri mix"}
],
sumar: function () {
this.contador++
}
}
}
}
</script>
我有以下错误消息:
v-on 处理程序中的错误:“TypeError: this is null”
最佳答案
更新脚本,更改添加到 Prop 以将默认值设置为零,将 sumar 移至方法。请检查,这样它会正常工作
<script>
export default {
name: 'Articulos',
props: {
contador: {
type: Number,
default: 0,
},
},
data() {
return {
imagenes: [
{id:1, url:"apeteat_2019_ensaladaquinoachicken.jpg", nombre: "Ensalada quinoa chicken"},
{id:2, url:"apeteat_2017__ensaladilla_rusa.jpg", nombre: "Ensaladilla rusa"},
{id:3,url:"apeteat_2018_nigirimix.jpg", nombre: "Niguiri mix"},
{id:4, url:"apeteat_2019_wrapcesar.jpg", nombre: "Wrap cesar"},
{id:5, url:"apeteat_2019_ensaladaquinoachicken.jpg", nombre: "Ensalada quinoa chicken"},
{id:6, url:"apeteat_2018_nigirimix.jpg", nombre: "Niguiri mix"}
]
}
},
methods: {
sumar: function () {
this.contador++
}
}
}
</script>
关于vue.js - v-on 处理程序中的错误 : "TypeError: this is null",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58321703/