How do i reset value in a q select (quasar)

Question

I am building a Vue.js project with the Quasar Framework.

I have a q-form that i am trying to reset.

https://quasar.dev/vue-components/form

I used the documentation to reset all the values, which has been working for toggles and input boxes, but i have not figured out yet how i can reset the value of my q select to an empty value.

I also used the quasar documentation for my q select. https://quasar.dev/vue-components/select

Answer 1

You can reset your select by setting the value bound with v-model to null.

There is also the reset() method, but it is not intended to reset the value.

reset () => void 0
Description Resets the virtual scroll computations;
Needed for custom edge-cases

const { createApp, ref } = Vue;

const app = createApp({
  data() {
    return {
      value: null,
      options: [
        'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
      ]
    }
  },
  methods:{
    setNull() {
      this.value = null;
    },
    reset() {    
      this.$refs.select.reset();
    }
  }
})

app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.11.7/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
 value: {{value}}
 <q-select v-model="value" :options="options" ref="select">
</q-select>
<button @click="setNull">null</button>&nbsp;
<button @click="reset">reset</button>&nbsp;
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.11.7/dist/quasar.umd.prod.js"></script>