Vue-Multiselect从数据库动态获取并替换静态数据的实现方法

我来帮你一步步把静态数据替换成从数据库获取的动态数据，具体操作如下：

1. 初始化数据为动态结构 #

首先把原来的静态valueMulti和optionsMulti改成空的初始值（可根据业务需求设置默认选中项），因为我们要从后端接口获取数据填充：

data() {
  return {
    valueMulti: [], // 初始化为空数组，后续可从后端获取默认选中项
    optionsMulti: [], // 初始化为空数组，后续填充后端返回的选项
    occTypes: [] // 可保留该变量，或直接复用optionsMulti
  }
}

2. 修改数据获取方法，同步到Multiselect的选项 #

你的getOccTypes方法已经能拿到后端数据了，现在需要把返回的response.data赋值给optionsMulti，如果后端有默认选中的项，也同步到valueMulti：

getOccTypes() {
  axios.get("/customer/application-types/2")
    .then(response => {
      // 把后端返回的选项数据赋值给optionsMulti
      this.optionsMulti = response.data;
      
      // 示例：如果后端返回默认选中的code集合，可筛选匹配项赋值给valueMulti
      // 假设默认选中code为['js']
      // this.valueMulti = this.optionsMulti.filter(item => ['js'].includes(item.code));
    })
    .catch(error => {
      // 别忘了处理请求失败的情况
      console.error('获取数据失败:', error);
    });
}

这里我把function(response)改成了箭头函数，这样就不用手动bind(this)了，箭头函数会自动继承外层的this指向，代码更简洁。

3. 在组件挂载时自动加载数据 #

要确保页面加载时就获取数据，需要在mounted钩子中调用getOccTypes方法：

mounted() {
  this.getOccTypes();
}

4. 处理标签新增的逻辑（可选） #

因为你的Multiselect是taggable的，点击新增标签会触发@tag="addTag"，如果需要把新增的标签同步到数据库，可以这样实现addTag方法：

addTag(newTag) {
  // 先把新增的标签添加到本地的optionsMulti和valueMulti
  const tagItem = { 
    name: newTag, 
    code: newTag.toLowerCase().replace(/\s+/g, '') // 生成唯一code，可根据业务调整
  };
  this.optionsMulti.push(tagItem);
  this.valueMulti.push(tagItem);
  
  // 调用后端接口把新标签保存到数据库
  axios.post("/customer/application-types/add", tagItem)
    .then(response => {
      console.log('标签保存成功');
    })
    .catch(error => {
      console.error('标签保存失败:', error);
      // 如果保存失败，移除本地添加的标签
      const optionIndex = this.optionsMulti.findIndex(item => item.code === tagItem.code);
      if (optionIndex !== -1) {
        this.optionsMulti.splice(optionIndex, 1);
        this.valueMulti.splice(this.valueMulti.findIndex(item => item.code === tagItem.code), 1);
      }
    });
}

5. 模板部分的确认 #

你的模板代码基本没问题，只要确保label="name"和track-by="code"对应后端返回数据的字段即可——如果后端返回的每个选项对象里确实有name和code字段，那当前配置完全匹配，不需要修改。

这样一来，页面加载后就会自动从数据库获取选项数据，填充到Vue-Multiselect中，同时支持多选和新增标签的功能啦～

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