从 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 的方法并在同一代码中计算以使其更短。

问题是我还没有找到从内部访问 hole 元素的方法，谁能解释一下正确的方法？谢谢

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;
      }
    }
  }
});

从 vue watcher 访问组件实例

Access component instance from vue watcher

vue.js

vuejs2

watch

computed-properties