[Vuejs]-How do I set value in an independent child component in VueJs?

by

3👍

Usually you should pass props to child components in order to control their states. But if you want a hacky access to children state, there are several workarounds:

  1. use ref pointers on children (though it requires actual ref placed),

  2. access component’s children with this.$children.

this.$children requires some additional logic probably, where you decide which index of the array you need to access. It depends on your application.

Usage example:

new Vue({
  el: '#app',
  methods: {
    toggleChild: function() {
      this.$refs['editMe'].editable = !this.$refs['editMe'].editable;
      // different approach without 'ref':
      // this.$children[0].editable = !this.$children[0].editable;
    }
  },
  components: {
    'child' : {
      template: `<p>{{ editable }}</p>`,
      data: function() {
      	return {
          editable: false
        }
      }
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child ref="editMe"></child>
  <button @click="toggleChild">Toggle editable inside child</button>
</div>
👤Egor Stambakio

Leave a comment