vue.js - v-on 处理程序中的错误 : "TypeError: this is null"

Question

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

Answer 1

更新脚本，更改添加到 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>