I have a Vue ponent with an empty template that needs to listen to prop changes:

// ponent.vue
<template>
</template>

<script>
  export default {
    props: ['mode'],
    updated: function() {
      console.log('updated!')
    }
  }
</script>

//parent.vue
<template>
  ...
  <childponent :mode="variable"></childponent>
</template>
...

Now whenever the parent's variable changes, I would expect childponent.updated to be called. However, this only seems to happen if the prop is used in the child's template.

The only workaround I came up with so far is to set the child ponent's template to <div v-show="false>{{ mode }}</div>, but that really doesn't seem right? Is there a nicer way to solve my issue?

The reason I'm using an empty template in the first place is because the ponent interacts with js library that does a bunch of DOM manipulations itself.

I have a Vue ponent with an empty template that needs to listen to prop changes:

// ponent.vue
<template>
</template>

<script>
  export default {
    props: ['mode'],
    updated: function() {
      console.log('updated!')
    }
  }
</script>

//parent.vue
<template>
  ...
  <childponent :mode="variable"></childponent>
</template>
...

Now whenever the parent's variable changes, I would expect childponent.updated to be called. However, this only seems to happen if the prop is used in the child's template.

The only workaround I came up with so far is to set the child ponent's template to <div v-show="false>{{ mode }}</div>, but that really doesn't seem right? Is there a nicer way to solve my issue?

The reason I'm using an empty template in the first place is because the ponent interacts with js library that does a bunch of DOM manipulations itself.

• javascript
• vue.js
• vuejs2

1 Answer 1

You can watch props and use empty render function if you don't need to create any DOM elements:

new Vue({
  el: '#app',
  data: {
    word: ''
  },
  ponents: {
    'child' : {
      props: ['myprop'],
      watch: {
      	myprop: function(n, o) {
          console.log('changed to: ', n)
        }
      },
      render: function(h) {
      	return h() // avoid warning message
      }
    }
  }
});

<script src="https://unpkg./vue/dist/vue.js"></script>

<div id="app">
  <child :myprop="word"></child>
  <button @click="word = 'one'">One</button>
  <button @click="word = 'two'">Two</button>
  <button @click="word = 'three'">Three</button>
</div>