从 vue watcher 访问组件实例

Question

我正在做一个项目，类似于账单经理，所以我希望每次数量或单位值发生变化时都重新计算小计，我尝试并搜索使用观察器或计算属性来完成此操作，但我找不到正确的方法，因为当另一个更改时，我需要访问元素的整个范围，像这样。

模型结构：

• 详情
• 数量
• 单位价值
• 小计（应该是计算的或更新的）

所以我认为我应该能够做这样的事情：

    Vue.component('item', {
    template: '#item',
    props: {
      item: Object,
    },
    computed:{
        total: function(){ 
            return this.quantity*this.unit_value;
         }
    },
    watch:{
      'item.quantity':()=>{
        this.subtotal = this.quantity*this.unit_value;
      }
    }
  });

我从一个列表中读取了几个组件

我使用 watcher 合并了该方法，并在相同的代码中计算以使其更短。

问题是我还没有找到从内部访问孔元素的方法，任何人都可以解释正确的方法吗？谢谢

Answer 1

你不应该在那里使用箭头函数，使用方法声明。

如果您想监视 item 对象的属性，则必须监视 item 对象本身，并另外使用监视程序的 deep: true 标志。

最后的细节，你正在使用几个没有在你的data 中声明的属性。声明它们，否则它们不会是响应式的，即当它们发生变化时计算不会重新计算。

见代码：

Vue.component('item', {
  template: '#item',
  props: {
    item: Object,
  },
  data() {
    return {
      subtotal: null,         // added data properties
      quantity: null,
      unit_value: null
    }
  },
  computed: {
    total: function() {
      return this.quantity * this.unit_value;
    }
  },
  watch: {
    item: {                          // watching for item now
      deep: true,                    // using deep: true
      handler() {                    // and NOT using arrow functions
        this.subtotal = this.quantity * this.unit_value;
      }
    }
  }
});