1

I am using v-select https://vue-select.org/ in my project. I'd like to have my search value filled with current selection on focus.

First step is: My first selection After I select the first option, I want to have my search value equal to the one I selected, now it shows as a placeholder not as an actual filled in search value and I cannot find a way to achieve that for now as I cannot set the search value on focus.

I also tried with :search or :autocomplete props but nothing seems to work.

  <vSelect
  v-if="addressSuggestions"
  v-model="checkoutStore.selectedAddress"
  label="tekst"
  :options="addressSuggestions"
  :autocomplete="checkoutStore.selectedAddress?.tekst"
  :search="checkoutStore.selectedAddress?.tekst"
  ...
Jedreqq
  • 15
  • 4

1 Answers1

0

Use v-model to get the selected value.

const { createApp, ref } = Vue;

const App = { 
  data() {
    return {
      options: ['Address 1', 'Address 123', 'Address 2', 'Address 3'],
      checkoutStore: { selectedAddress: null }
    }
  }
}
const app = createApp(App)
app.component('v-select', window['vue-select']);
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
   checkoutStore.selectedAddress: {{ checkoutStore.selectedAddress}}
  <v-select :options="options" v-model="checkoutStore.selectedAddress"></v-select>
</div>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@4.0.0-beta.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
Tolbxela
  • 4,767
  • 3
  • 21
  • 42
  • I want to have the search input filled up with the current selection after activating the dropdown, so in your example if I select "Address 1" and then focus again and open the dropdown I want to have "Address 1" already written in that I don't need to write "address 1" again in search to search for it – Jedreqq Apr 20 '23 at 06:35
  • @Jedreqq it is already so. – Tolbxela Apr 20 '23 at 07:54
  • what do I mean is when I have selected "Address 1" and focus in again, when I will try to write "Address 123" I want to actually write only "23" instead of writing the whole thing as it clears out when I start to write something in – Jedreqq Apr 20 '23 at 08:25
  • @Jedreqq it looks like you mean the autocomplete function. But it also work now with typing 23 and getting Address 123. I don't understand what is your problem. – Tolbxela Apr 20 '23 at 09:45