文章/答案/技术大牛

发布

社区首页 >问答首页 >Vuetify的v-autocomplete组件在清除时会将v-model值重置为null

问Vuetify的v-autocomplete组件在清除时会将v-model值重置为null
EN

Stack Overflow用户

提问于 2021-05-24 21:56:42

回答 1查看 328关注 0票数 2

在下面的代码中，我使用了一个v-autocomplete组件和一个存储所选值的变量select。watch记录select的值和类型。我面临的问题是，当在v-autocomplete中键入的文本被清除时，select默认为null而不是空字符串。有没有办法将select还原为空字符串而不是空对象？

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12">
            <v-autocomplete
              v-model="select"
              :items="items"
              dense
              filled
              label="Filled"
              clearable
            ></v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    select: "",
  }),
  watch:{
    value:function(value){
      console.log(this.select) // select value
      console.log(typeof(this.value)); // select variable type
    }
  }
})

javascript

vue.js

vuetify.js

v-autocomplete

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-24 22:25:39

v-model='select'是:value="select"和@input="select = $event"的缩写。因此，如果您想自定义发出的@input事件的行为，您可以将其以展开的形式编写。

在下面的代码片段中，当输入值发生变化时，如果输入值不为null，则将其赋值给select，否则将其赋值为空字符串。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    select: "",
  }),
  watch:{
    select:function(value){
      console.log(value) // select value
      console.log(typeof(value)); // select variable type
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12">
            <v-autocomplete
              :value="select"
              @input="select = $event || ''"
              :items="items"
              dense
              filled
              label="Filled"
              clearable
            ></v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67673324

复制

相似问题

问Vuetify的v-autocomplete组件在清除时会将v-model值重置为null
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuetify的v-autocomplete组件在清除时会将v-model值重置为nullEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuetify的v-autocomplete组件在清除时会将v-model值重置为null
EN