How to pass v-model value between components

Question

I have a parent form component and a child. How do I pass data from one to another using v-model? They are in different files. I'm using the components of the Quasar Framework.

Parent Component

<template>
  <q-input
    label="Nome *"
    lazy-rules
    :rules="[val => (val && val.length > 0) || 'Por favor, digite o seu nome']"
    v-model="nome"
  />
</template>

<script>
export default {
  name: "Nome",
  data() {
    return {
      nome: "Max"
    };
  }
};
</script>

Child Component

<template>
  <div class="q-pa-md" style="max-width: 500px">
  <q-form @reset="onReset" class="q-gutter-md">
      <Nome> </Nome>              
      <div>
   <q-btn label="Reset" type="reset" color="red" flat class="q-ml-sm" />
      </div>
    </q-form>
  </div>
</template>

<script>
import Nome from "components/Nome.vue";
export default {
  components: { Nome },  

  onReset() {
    this.name = null;
  }
};
</script>

How do I onReset() work?

Automatically translated.

Possible duplicate of [vue how to access v-model from child component](https://stackoverflow.com/questions/52472074/vue-how-to-access-v-model-from-child-component) — l-portet, May 23 '19 at 19:40

score 1 · Accepted Answer · answered May 24 '19 at 09:14

I think you have some confusion about your child component and parent component. On your code Nome is the child component and the form that using Nome is the parent component.

You can use ref to call the reset method on Nome from the parent form component.

Here is a Working example -

Vue.component("nome-input", {
 data(){
   return {
     input: ""
    }
  },
  template: `
  <input @input="onInput" type="text" v-model="input">
  `,
  methods: {
   reset(){
     this.input = ""
    },
    onInput(){
     this.$emit('onInput', this.input);
    }
  }
});
Vue.component("user-form", {
 data(){
   return {
     name: '',
    }
  },
  components: {
  },
  template: `
  <div>
   {{name}}
    <nome-input ref="nome" @onInput="updateName"></nome-input>
    <button @click.prevent="save">Save</button>
    <button @click.prevent="reset">reset</button>
  </div>
  `,
  methods: {
   save(){
     console.log(this.name);
    },
    reset(){
     this.name = "";
     this.$refs.nome.reset();
    },
    updateName(value){
     this.name = value;
    }
  }
  
});

new Vue({
  el: "#app",
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <user-form></user-form>
</div>
</body>
</html>

Here is a jsfiddle link for the above codes https://jsfiddle.net/azs06/u4x9jw62/34/

How to pass v-model value between components

1 Answers1