Vue 组件直到模板中的值才具有反应性

Question

I have a child component in Vue. I also use Vuex for some values.

When I click something in the parent component, the child component should be triggered. I do that by sending an active (bool) as prop to the child component.

In the updated method I do what needs to be done when the component is triggered.

Problem

In order for updated to be triggerd, I need to add active to my template. Else it's not triggered. So my really hackish solution right now is to use v-show="!active || active" which says, "always show the div".

How can I trigger the component without a hack like this? I don't need the active value in my template.

Complete child component

Vue.component('p-inline-readonly', {
  mixins: [ table_mixin ],
  props: {
    value: [ String, Number ],
    active: Boolean
  },
  updated() {
    this.reset();
    this.refocus();
  },
  template: /*html*/ `
    <div class="slot p-inline-readonly">
      <div class="presentation" v-show="!active || active">
        {{value}}
      </div>
    </div>
  `
});

Answer 1

You could watch active and trigger an update:

watch: {
    active: function(val, oldVal) {
      this.$forceUpdate();
    },
}

You may also add a key to the child component:

<p-inline-readonly :key="active" ... >

This will make the component rerender when active change, but won't call the updated hook so you would need to move its logic to a different hook like mounted