[Vuejs]-Preselect value on edit in Select 2 in vue.js

by

0👍

You can use v-model to bind the value with selected variable declared in data().
If there is an initial value for selected, then it will be selected by default.

<template>
  <div id="app">
    <v-select
      :options="prodItems"
      @input="setSelected"
      v-model="selected"
    ></v-select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: { id: 1, label: "P1" },
      prodItems: [
        { id: 1, label: "P1" },
        { id: 2, label: "P2" },
      ],
    };
  },
  methods: {
    setSelected() {},
  },
};
</script>

As you are using objects as options in the array, you can set the default selected to { id: 1, label: 'P1' }. I believe you need a label attribute in your objects to display correctly in your selector dropdown.

To find the target object in your option array:

const selected = options.find(option => option.id === [target id])

Leave a comment