Vuetify 自动完成 - 设置初始搜索值？

Question

我几乎处于 vuetify 的初学者水平，我想在 <v-dialog> 中的 <v-autocomplete> 上设置搜索值。

我希望结果像这样：（已编辑）

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

但输入字段为空。

我从以下位置获取示例代码： 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

对此有什么想法？

Answer 1

我会使用计算值：

模板

<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";
  }
});