Vue component not reactive until value in template

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

Could you give a default value to the prop? active: {default: false, type: Boolean} — kevmc

Oli Crt Oli Crt · Accepted Answer · 2019-06-26T10:14:46

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

Vue component not reactive until value in template

1 Answers