Question

我有一个下面的vue组件，我希望在安装时触发它。我该怎么做？

Vue.component('check-mark', {
    name: 'check-mark',
    template: `
    <input :value="value">
    `,
    props: {
        value: {
            type: String,
            required: true,
        },
    },
    mounted: async function () {
        //trigger this.value watch() here
    },
    watch: {
        value: function (value) {
            if (value == 'Y') {
                this.class = 'checked';
            } else {
                this.class = 'unchecked';
            }
        },
    },
});

Answer 1

这是一个很老的帖子，也许这个功能当时并不适合，但至少现在（在vue 2.x中）有一种方法可以在观察者本身中进行。

在执行此操作之前，您应该完全考虑计算财产。计算属性有许多优点，而且通常它们是更好的解决方案。仅当计算属性不足时才应使用此功能。

观察者可以是一个对象而不仅仅是一个函数，他们使用一个名为immediate的属性来告诉vue在加载时运行观察者。然后运行的函数在handler属性中。所以，在你的例子中，你的观察者可能是

watch: {
    value: {
        handler: function(value) {
            if (value == 'Y') {
                this.class = 'checked';
            } else {
                this.class = 'unchecked';
            }
        },
        immediate: true
    },
}

API文档：https://vuejs.org/v2/api/#watch

在这个特定的情况下，class的计算属性肯定会更好，但是发布这个以防其他人偶然发现这个帖子有一个计算属性不会做的情况（就像我做的那样）

Answer 2

我认为在这种情况下计算机可能会更好。

computed:{
  class(){
    return this.value === 'Y' ? 'checked' : 'unchecked'
  }
}

但如果您真的想使用观察者，请将您在手表中执行的代码抽象为方法并从挂载中调用它。

Vue.component('check-mark', {
  name: 'check-mark',
  template: `
    <input :value="value">
  `,
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data(){
    return {
      class: null
    }
  },
  methods:{
    setClass(value){
      if (value == 'Y') {
        this.class = 'checked';
      } else {
        this.class = 'unchecked';
      } 
    }
  },
  mounted: function () {
    this.setClass(this.value)
  },
  watch: {
    value: function (value) {
      this.setClass(value)
    },
  },
});

Vue Trigger腕表已安装

2 个答案: