时间戳

首页 > 解决方案 > 在 vue.js 中的 Select 2 中编辑时预选值

vue.js - 在 vue.js 中的 Select 2 中编辑时预选值

问题描述

我在 vue.js 中使用 vue-select

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

在输入时，我在下拉列表中获取项目，但我想在我的表中预先选择编辑值，假设如果保存了 id 2，那么应该选择 id 2 的选择选项。

标签： vue.jsvuejs2vue-component

解决方案

您可以使用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])

推荐阅读