Access component v-model

julioferraz

Hello! I’m new to Vue and Quasar. I have this component.

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

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

I embed it in the “Profile” page. How do I access the properties of v-model?

<template>
  <div class="q-pa-md" style="max-width: 500px">
    <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
      <Nome v-model="name"></Nome>
      <Idade v-model="idade"></Idade>
      <Sexo v-model="sexo"></Sexo>

      <q-toggle v-model="accept" label="Eu aceito a licença e os termos" />

      <div>
        <q-btn label="Submit" type="submit" color="red" />
        <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";
import Idade from "components/Idade.vue";
import Sexo from "components/Sexo.vue";

export default {
  components: { Nome, Idade, Sexo },
  data() {
    return {
      nome: null,
      idade: null,
      sexo: null,
      accept: false
    };
  },

  methods: {
    onSubmit() {
      if (this.accept !== true) {
        this.$q.notify({
          color: "red-5",
          textColor: "white",
          icon: "fas fa-exclamation-triangle",
          message: "You need to accept the license and terms first"
        });
      } else {
        this.$q.notify({
          color: "green-4",
          textColor: "white",
          icon: "fas fa-check-circle",
          message: "Submitted"
        });
      }
    },

    onReset() {
      this.nome = null;
      this.sexo = null;
      this.idade = null;
      this.accept = false;
    }
  }
};
</script>

Automatically translated.

s.molinari

In your “nome” template, you’d need to create prop for v-model called “value” and sync it with the input event. You need to read up about passing props down and “emitting” events up the component hierarchy.

But, you are also wasting your time creating separate components for each field like this, because you aren’t really adding any value or difference to them.

Instead, you could do something like this (untested and only for conceptual purposes):

<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
     <q-input 
        v-for="field in fields"
        v-model="field.value"
        :label="field.label"
        lazy-rules
        :rule="field.rule"
      > 

      <q-toggle v-model="accept" label="Eu aceito a licença e os termos" />

      <div>
        <q-btn label="Submit" type="submit" color="red" />
        <q-btn label="Reset" type="reset" color="red" flat class="q-ml-sm" />
      </div>
    </q-form>

export default {
  components: { Nome, Idade, Sexo },
  data() {
    return {
      fields: [
        { 
          name: 'nome',
          label: 'Nome *'. 
          value: null,
          rule: [val => (val && val.length > 0) || 'Por favor, digite o seu nome']
         },
        { 
          name: 'idad',
          label: 'Idad *'. 
          value: null,
          rule: [val => (val && val.length > 0) || 'Por favor, digite o seu idad']
         },
         { name: 'sexo',
          label: 'Seco *'. 
          value: null,
          rule: [val => (val && val.length > 0) || 'Por favor, digite o seu sexo']
         }
      ],
      accept: false
    };
  },

Scott

julioferraz

Thank you Scott. I will use different Quasar components in my form. I read the documentation again but could not get it to work. This seems very complicated. I’m thinking of using Vuex. I saw in their documentation a very simple example.

What’s wrong?

<template>
  <q-input
    label="Nome *"
    lazy-rules
    :rules="[val => (val && val.length > 0) || 'Por favor, digite o seu nome']"
    v-bind:checked="checked"
    v-on:change="$emit('change', $event.target.checked)
"
  />
</template>

<script>
export default {
  name: "Nome",
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  }
};
</script>

<template>
  <div class="q-pa-md" style="max-width: 500px">
    <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
      <Nome v-model="nome"></Nome>
      <Idade v-model="idade"></Idade>
      <Sexo v-model="sexo"></Sexo>

      <q-toggle v-model="accept" label="Eu aceito a licença e os termos" />

      <div>
        <q-btn label="Submit" type="submit" color="red" />
        <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";
import Idade from "components/Idade.vue";
import Sexo from "components/Sexo.vue";

export default {
  components: { Nome, Idade, Sexo },
  data() {
    return {
      nome: null,
      idade: null,
      sexo: null,
      accept: false
    };
  },

  computed: {
    nome: function() {
      $emit("nome", $event.target.checked);
    }
  },

  onSubmit() {
    if (this.accept !== true) {
      this.$q.notify({
        color: "red-5",
        textColor: "white",
        icon: "fas fa-exclamation-triangle",
        message: "You need to accept the license and terms first"
      });
    } else {
      this.$q.notify({
        color: "green-4",
        textColor: "white",
        icon: "fas fa-check-circle",
        message: "Submitted"
      });
    }
  },

  onReset() {
    this.nome = null;
    this.sexo = null;
    this.idade = null;
    this.accept = false;
  }
};
</script>

Automatically translated

s.molinari

You still aren’t understanding passing of props and events. Props down. Events up. For instance, what purpose is the computed property in your form emitting “nome”? Your form component is the parent, right? What is it emitting to? Please read.

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Also, your setting up of the props is incorrect. You need to define props, not “model”.

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

And, you can still use different Quasar components.

https://codepen.io/smolinari/pen/zQPXRK

It’s not finished, but it should help you understand, hopefully.

I’d suggest you also take this course on Udemy. It’s very good and will teach you the basics.

https://www.udemy.com/vuejs-2-the-complete-guide

Scott