[Vuejs]-How do I clear the v-model in the child component from the parent?

by

1👍

✅

One way of doing that with props and emit:

Vue.component('child', {
  template: `
    <textarea
      v-model="text" 
      ref="smilesTextarea"
      placeholder="Введите комментарий"
    ></textarea>
  `,
  props: ['clear'],
  data() {
    return {
      text: ''
    }
  },
  watch: {
    clear(newVal) {
      this.text = ''
      this.$emit('cleared')
    }
  }
})
new Vue({
  el: '#demo',
  data() {
    return {
      clear: false
    }
  },
  methods: {
    cleanDataForm() {
      this.clear = true
    },
    resetClear() {
      this.clear = false
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button id="btn--clear" @click="cleanDataForm">clean data</button>
  <child :clear="clear" @cleared="resetClear"></child>
</div>
👤Nikola Pavicevic

Leave a comment