Блог

Я использую vue-select в vue.js

 <v-select :options="prodItems" @input="setSelected"></v-select>
  

При вводе я получаю элементы в выпадающем списке, но я хочу предварительно выбрать значение при редактировании, предположим, в моей таблице, если идентификатор 2 сохранен, тогда в опции выбора должен быть выбран идентификатор 2.

Вы можете использовать v-model для привязки значения к selected переменной, объявленной в data() . Если есть начальное значение для selected , то оно будет выбрано по умолчанию.

 <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>
  

Поскольку вы используете объекты в качестве параметров в массиве, вы можете установить значение по умолчанию selected { id: 1, label: 'P1' } равным . Я считаю, что вам нужен label атрибут в ваших объектах для правильного отображения в раскрывающемся списке выбора.

Чтобы найти целевой объект в вашем массиве параметров:

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