使用无限滚动时如何在 v-select 中设置初始值

Question

我已经像在the official example 中一样设置了它...但是用户的选择存储在数据库中，下次他们访问该页面时，我希望将其预设为他们之前的选择。在这种情况下，我似乎不知道该怎么做，因为 :options 是一个计算属性...

编辑：我没有提供足够的代码...我用更多信息更新了它...我确实找到了问题，这是两件事（1）@987654323 中的数据@ 与paginated 中的数据格式不同，因此无法识别初始值，并且（2）我没有使用v-model，而是使用@input，因为我需要将选择发送到数据库.通过将v-model 设置为一个虚拟数据变量并使用来自prefs 的数据以与选项列表相同的格式填充该变量，然后它就起作用了。我也会发布我的答案。

HTML

  <v-select
    :options="paginated"
    :filterable="false"
    @input="setValue"
    @open="onOpen"
    @close="onClose"
    @search="(query) => (search = query)"
  ></v-select>

JS

...
  props: ['prefs'],
...
  data: function() {
...
    countries: []
...
  computed: {
    filtered() {
      return countries.filter((country) => country.includes(this.search))
    },
    paginated() {
      return this.filtered.slice(0, this.limit)
    },
    hasNextPage() {
      return this.paginated.length < this.filtered.length
    },
  },
...
  methods: {
    setValue: function(v) {
      this.prefs = v.id;
      (... ajax call to update database ...)
    }
...
  created: {
    (... ajax call to populate this.countries from database ...)
  }

Answer 1

https://codepen.io/chauriya/pen/BaZOxby

请看附件pen，这里我用v-model为v-select设置了一个默认值，我看到你的prefs是一个道具，如果你将默认值传递给prefs然后它应该在 v-select 中设置。如果您在 prop 中发送一些默认值，那么请更新您的问题，它会比它更清楚。

Answer 2

我的问题是双重的：

1. 我没有使用v-model，而是使用@input，因为我想在 AJAX 调用中将选择发送到数据库，因此没有什么可以挂钩初始值。
2. prefs 中的数据与paginated 中的数据格式不同（字符串与对象），因此它无法在选项列表中找到初始选择。

这里我贴出固定代码：

HTML

<v-select
    :options="paginated"
    :filterable="false"
    v-model="dummy"
    @input="setValue"
    @open="onOpen"
    @close="onClose"
    @search="(query) => (search = query)"
  ></v-select>

JS

...
  props: ['prefs'],
...
  data: function() {
...
    countries: [],
    dummy: {}
...
  computed: {
    filtered() {
      return countries.filter((country) => country.includes(this.search))
    },
    paginated() {
      return this.filtered.slice(0, this.limit)
    },
    hasNextPage() {
      return this.paginated.length < this.filtered.length
    },
  },
...
  methods: {
    setValue: function(v) {
      this.prefs = v.id;
      (... ajax call to update database ...)
    }
...
  created: {
     let me = this;
    (... ajax call to populate this.countries from database ...)
    .then(function(resp) {
        me.countries = resp.data;
        me.dummy = me.countries.find(c => c.id == me.prefs);
    })
  }