Question

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

2019-10-10

4586

vue.js

我在 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：这是空的”

Answer 1

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

添加事件侦听器执行的操作大致相当于此：

addEventListener('click', this.sumar)

此处 this 绑定丢失。这可能不是立即显而易见的，但一旦将函数传递给 addEventListener ， this 就会消失。

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

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

或者，您可以使用 bind 或获取 this 的别名（即 const that = this ）作为闭包。

我想补充一点，您不应该尝试从组件内部更新 prop 的值。您会发现，当您这样做时，Vue 会记录一条警告消息。您应该发出一个事件，以便数据的所有者可以更新它，或者将 prop 的副本放入本地 data 。有关更多信息，请参阅 https://v2.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>