Question

我在单击Vue中的按钮时尝试添加1时遇到麻烦

我创建了一个函数求和器，我在分配给按钮的v-on中调用它，创建了“ contador”，但是我遇到了错误。它说这是空的。我不知道为什么，因为我已经在道具中将变量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：此为空”

Answer 1

Vue自动为this中的函数绑定methods值，以便可以安全地将它们作为事件处理程序调用。通过在data中定义函数，您不会获得此自动绑定。

添加事件侦听器可以执行以下操作：

addEventListener('click', this.sumar)

this绑定在这里丢失。这可能不会立即显而易见，但是一旦函数传递到addEventListener，this就消失了。

这里有几种解决方案。最简单的方法是将函数移至methods部分。

methods: {
  sumar () {
    this.contador++ 
  }
}

或者，您可以使用bind或为this获取别名（即const that = this）作为结束符。

我要补充一点，您不应该尝试从组件内部更新道具的值。您会发现Vue在执行此操作时会记录一条警告消息。您应该发出事件以使数据的所有者可以对其进行更新，也可以将道具的副本复制到本地data中。有关更多信息，请参见https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow。

Answer 2

更新了脚本，更改了添加到props中以将默认值设置为零，将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>

v-on处理程序中的错误：“ TypeError：这是null”

2 个答案: