Lo tengo configurado como en el ejemplo oficial ... pero la elección del usuario se almacena en la base de datos, y la próxima vez que vayan a la página quiero que esté preconfigurada con su elección anterior. Parece que no puedo entender cómo hacerlo en este caso, ya :options son una propiedad calculada ...
EDITAR: No proporcioné suficiente parte de mi código... Lo actualicé con más información... Encontré el problema, eran dos cosas (1) los datos en las prefs no estaban en el mismo formato que los datos paginated , por lo que no pudo identificar el valor inicial, y (2) no estaba usando v-model sino @input porque necesito enviar la elección a la base de datos. Al configurar v-model en una variable de datos ficticia y completar esa variable con los datos de las prefs en el mismo formato que la lista de opciones, funcionó. Voy a publicar mi respuesta también.
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 ...) }https://codepen.io/chauriya/pen/BaZOxby
Mire el bolígrafo adjunto, aquí estoy configurando un valor predeterminado para v-select con v-model, veo que sus prefs son un accesorio, si está pasando el valor predeterminado a prefs , entonces debería establecerse en v-select. Si está enviando algún valor predeterminado en prop, actualice su pregunta, será más claro que.
Mi problema era doble:
v-model sino @input porque quería enviar la elección a la base de datos en una llamada AJAX, por lo que no había nada a lo que enganchar el valor inicial.prefs no estaban en el mismo formato que los datos en paginated (cadena frente a objeto), por lo que no pudo ubicar la selección inicial en la lista de opciones.Aquí publico el código fijo:
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); }) }