Блог

В приведенном ниже коде я использую компонент v-автозаполнения и переменную select , в которой хранится выбранное значение. В watch журналах указывается значение и тип select . Проблема, с которой я сталкиваюсь, заключается в том, что при очистке текста, введенного в v-автозаполнении, 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
    }
  }
})
 

v-model='select' это сокращение от :value="select" и @input="select = $event" . Таким образом, если вы хотите настроить поведение излучаемого @input события, вы можете записать его в развернутом виде.

В приведенном ниже фрагменте кода при изменении входного значения вы назначаете его 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>