How can I set option value selected in v-select in vue.js 2?

Question

I am trying to set option selected where option value is 1. But I am getting in trouble when using v-select from vuejs. This is how I am trying to do -

<v-select name="branchid" v-model="branchid" 
         :options="branches.map(branches => ({label: branches.label, value: branches.value}))" 
         :selected="branches.value === 1"></v-select>

Would someone help me please to get the option value selected when option value is 1?

score 0 · Answer 1 · answered Feb 08 '19 at 09:46

0

I've put together a simplified version of what (I think) you're trying to do:

<template>
  <div>
    <div>
      <select v-on:change="select($event);" value="branchid">
        <option disabled value="">Please select one</option>
        <option :selected="branchid === 1">1</option>
        <option :selected="branchid === 2">2</option>
        <option :selected="branchid === 3">3</option>
      </select>
      <span>Selected: {{ branchid }}</span>
      <button v-on:click="selectOne">Select Option 1</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      branchid: 0,
      branchidTwo: 1
    };
  },
  methods: {
    select: function(evt) {
    this.branchid = evt.target.value;
  },
    selectOne: function() {
      this.branchid = 1;
    }
  }
};
</script>

This does not use the v-model pattern. The docs explicitly state that if you use v-model, the class itself will be used as the source of truth rather than value or selected. You'll see I've added a button that will set the selected option on the select component.

Hope that helps.

answered Feb 08 '19 at 09:46

Marcus

2,153
2
13
21

Also, I need the search option to choose the `option` value – Rashed Hasan Feb 08 '19 at 11:04
1

Could you explain in more detail what you're trying to achieve here? What do you mean by "search option"? – Marcus Feb 08 '19 at 11:06
I have a branch list, during transfer my products to stock warehouse a branch also be selected and I want to keep "warehouse" (it also a branch and it's id is1) te is selected for all time. But, if a user wants to select another branch from the branch list except for the warehouse branch then, during selection user will be able to select with search filter (like select2). In this form already I am getting branch dynamically from database in vuejs script. – Rashed Hasan Feb 08 '19 at 11:23
data:{branches: [], branches: [ @foreach($branches as $branch) { value: '{{ $branch['branchid'] }}', label: '{{ $branch['branchname'] }}', }, @endforeach ], } – Rashed Hasan Feb 08 '19 at 11:27
You can't have two options selected at the same time in a select though. Surely the answer is to have "warehouse" as a default selection in your class, and then have an optional second option which is selected from the dropdown? – Marcus Feb 08 '19 at 11:28
From dropdown options only first one I mean warehouse should be the default selected and others will be with searchable option to select. (sorry for my bad English) – Rashed Hasan Feb 08 '19 at 11:32

score 0 · Answer 2 · edited Jul 15 '22 at 00:52

Initialize it with select v-model with the value you want selected

new Vue({
    el: '#example',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

Source : https://v2.vuejs.org/v2/guide/forms.html#Select

How can I set option value selected in v-select in vue.js 2?

2 Answers2