Vuejs。无法设置未定义的属性（设置）

Question

data() {
        return {
            qty_to_order: null,
        }
    },

methods: {
        showQty(product_id) {
            this.carts.filter(function(cart) {
                if (cart.product_id === product_id) {
                    this.qty_to_order = cart.qty_to_order
                }
            })
        }
    }

当我调用该方法时，出现错误。如何将 cart.qty_to_order 写入 this.qty_to_order （在数据中）？

这个方法有效

showQty(product_id) {
            this.carts.filter(function(cart) {
                if (cart.product_id === product_id) {
                    console.log(cart.qty_to_order)
                }
            })
        }

Answer 1

您需要了解

this

关键字的工作原理。它不起作用的原因是，如果您使用

function() {}

作为回调，则 this 的值就是窗口。如果您使用箭头函数，那么您将获得正确的

this

值。

<script>
export default {
  data() {
    return {
      qty_to_order: null,
      carts: [{
        product_id: 1,
        qty_to_order: 1
      }]
    }
  },
  methods: {
    showQty(product_id) {
      this.carts.filter((cart) => {
        console.log(this)
        if (cart.product_id === product_id) {
          this.qty_to_order = cart.qty_to_order
        }
      })
    }
  }
}
</script>

<template>
  <button @click="showQty(1)">show qty</button>
</template>