Vue Select预定义选项被数据库值覆盖，如何解决？

问题还原 #

我用Vue Select生成标签列表，用户可添加标签并保存到数据库，希望列表里始终保留预定义的选项供点击选择。尝试把预定义值放进options数组，但从数据库获取的标签会覆盖这个预定义列表。请问该怎么解决？是前端简单修复就行，还是需要把预定义值存入数据库？代码示例如下：

<template>
  <v-select
    :value="value"
    @input="$emit('input', $event)"
    :options="options"
    maxlength="250"
    taggable
    multiple
    select-on-blur
    v-bind="$attrs"
  />
</template>

<script>
  import {propertyService} from '@/services/property';

  export default {
    props: {
      value: Array
    },
    data() {
      return {
        options: ['Tag1', 'Tag2',], /* 原本想放预定义值，但数据库数据会覆盖这里 */
      };
    },
    
    /* 从数据库获取标签的逻辑 */
    created() {
      propertyService.getPropertyTags().then(result => this.options = result.data);
      console.log(this.options)
    }
  };
</script>

两种解决思路 #

1. 前端快速修复（无需改动数据库） #

核心是合并预定义值与数据库返回值，避免直接覆盖。把预定义标签和数据库拉取的标签合并后去重，再赋值给options：

created() {
  // 单独维护预定义标签，方便后续修改
  const predefinedTags = ['Tag1', 'Tag2'];
  propertyService.getPropertyTags().then(result => {
    // 用Set自动去重，再转回数组
    this.options = [...new Set([...predefinedTags, ...result.data])];
  });
}

• 优点：零后端改动，快速生效，适合预定义标签固定、不需要后台管理的场景。
• 注意：如果数据库里已经存在和预定义重复的标签，Set会自动去重，避免列表出现重复项。

2. 数据库持久化方案（适合长期维护） #

如果需要统一管理预定义标签（比如后续要修改、新增预定义，或者多端复用），建议把预定义标签存入数据库：

• 在标签表新增字段（如is_predefined），标记哪些是系统预定义标签，哪些是用户添加的。
• 后端接口返回标签列表时，自动包含所有预定义标签和用户标签。
• 前端直接使用接口返回的完整列表即可，无需额外合并逻辑。
• 优点：预定义标签可通过后台动态调整，无需修改前端代码，适合复杂业务场景。

选择建议 #

• 临时固定几个预定义标签：选前端合并方案，成本最低。
• 需要动态调整预定义标签、多端复用：选数据库方案，扩展性更强。

内容的提问来源于stack exchange，提问作者Maflec