验证自动完成功能-设置初始搜索值？

问题描述

我对vuetify相当初级，我想在<v-autocomplete>中的<v-dialog>上设置搜索值。

我期望这样的结果 ：（已编辑）

更像这样（已编辑：已添加图片）

但输入字段为空。

我从以下示例代码中获取了代码： https://vuetifyjs.com/en/components/dialogs/#nested-dialogs 并进行了如下修改：

    <v-dialog v-model="dialog2" max-width="500px">
      <v-card>
        <v-card-title>
          Dialog 2
        </v-card-title>
        <v-card-text>
          <v-autocomplete 
                          :items="select" 
                          :search-input.sync="search" 
                          label="A Select List" 
                          item-value="text" 
                          return-object
                          autofocus
                          ></v-autocomplete>
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" text @click="dialog2 = false">
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

JS

new Vue({
  el: "#app",vuetify: new Vuetify(),data() {
    return {
      dialog2: false,search: "1",select: [{ text: "State 1" },{ text: "State 2" },{ text: "Another 2" },{ text: "State 3" }]
    };
  },watch: {
    search(n,o) {
      console.log("watch search",n,o);
      // at some point search is set to null
      // reset it to the old value
      if (n === null) this.search = o;
    }
  },mounted() {
    this.search = "2";
  }
});

我还制作并更新（编辑）了一个代码笔：
https://codepen.io/joergwork/pen/xxVRwyE

对此有一些想法吗？

解决方法

我将使用计算值：

模板

<div id="app">
  <v-app id="inspire">
    <div>
      <v-row justify="center">
        <v-btn color="primary" class="ma-2" dark @click="dialog2 = true">
          Open Dialog 2
        </v-btn>
        <v-dialog v-model="dialog2" max-width="500px">
          <v-card>
            <v-card-title>
              Dialog 2
            </v-card-title>
            <v-card-text>
              <v-autocomplete :value="searchText" :items="select" :search-input.sync="search" label="A Select List" item-value="text" return-object autofocus></v-autocomplete>
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" text @click="dialog2 = false">
                Close
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </div>
  </v-app>
</div>

JS

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: "#app",vuetify: new Vuetify(),computed: {
    searchText() {
      return this.select[0] || ''
    }
  },data() {
    return {
      dialog2: false,search: "1",select: [{ text: "State 1" },{ text: "State 2" },{ text: "Another 2" },{ text: "State 3" }]
    };
  },watch: {
    search(n,o) {
      console.log("watch search",n,o);
      // at some point search is set to null
      // reset it to the old value
      if (n === null) this.search = o;
    }
  },mounted() {
    this.search = "2";
  }
});