vue.js 我如何重置Q选择(类星体)中的值

disho6za  于 2023-03-31  发布在  Vue.js
关注(0)|答案(1)|浏览(185)

我正在使用Quasar框架构建一个Vue.js项目。
我有一个q表单,我正在尝试重置。
https://quasar.dev/vue-components/form
我使用文档重置了所有的值,这对切换和输入框都有效,但我还没有弄清楚如何将q select的值重置为空值。
我还在q select. https://quasar.dev/vue-components/select中使用了类星体文档

vkc1a9a2

vkc1a9a21#

您可以通过将v-model绑定的值设置为null来重置选择。
还有reset()方法,但它不打算重置值。
reset()=〉void 0

说明重置虚拟滚动计算;

定制边缘机箱所需

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>

相关问题