It was very good. I tried to make the embedded splitter, it works but when I close it the middle part closes too. I tried to change the css classes, but I couldn’t.

https://codepen.io/julioferraz/pen/oNbRQgw

Automatically translated.

Hi! I would like to get two QDrawer on the left and the QPageContainer on the right. I would like to create a layout similar to Evernote. How can I get this? Thank you!

Automatically translated.

@metalsadman Of course. I understand. Thank you!

@rstoenescu Worked, thank you! But I did not quite understand. The “q-slider” is not native?

Automatically translated

Hi! The Slider seems to have some bug. The first time the Onreset method is rendered, it works, but when I change the value of the slide again it does not work. The following error appears:

[Vue warn]: Error in v-on handler: “TypeError: $event.target is undefined”

https://codepen.io/julioferraz/pen/VOBwmy

<div class="text-h5" align="center">Test Slider</div>
<br>
<div align="center" id="q-app">
      
   <custom-slider v-model="val1"> </custom-slider>
   <q-btn v-on:click="onReset" label="Reset" color="red" />
   
</div>

Vue.component('custom-slider', {
  props: ['value'],
  template: `
    <q-slider
      v-model="value"
      :min= 0
      :max= 100
      label
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  `
})

new Vue({
  el: '#q-app',
  data: function () {
    return {
     val1: 75
    }
  },
    methods: {
    onReset() {this.val1 = 25}
    }
})

Translated automatically

@s-molinari Thank you Scott!

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

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.