如何在下拉框中绑定数据库值？项目实现遇阻求助

我正在开发一个项目，需要将数据库中的值显示在下拉框中，再根据选择的选项过滤记录。但我卡在了第一步，尝试多种方式实现下拉框值的显示逻辑却均未成功，不确定操作是否正确。

后端C#接口代码 #

[HttpGet]
[Route("api/web/GetFilterRecords")]
public List<DocumentMaster> GetFilterRecords()
{
    using (ApplicationDbContext db = new ApplicationDbContext())
    {
        List<DocumentMaster> xx = db.Documents.Where(x => x.VoucherYear.Contains(x.VoucherYear)).Select(p => new DocumentMaster()
        {
            VoucherYear = p.VoucherYear,
            YEAR = p.VoucherYear,
        }).ToList();
        return xx;
    }
}

前端HTML结构 #

<div class="row">
    <label class="col-sm-2 col-form-label" for="">Select Voucher Year</label>
    <div class="col-sm-3">
        <select2 v-model="vm.V_Year" class="form-control">
            <option v-for="option in Year" v-bind:value="option.years">{{option.YEAR}}</option>
        </select2>
    </div>
</div>

前端Vue逻辑代码 #

var vueContent = new Vue({
    el: '#Form',
    data: {
        vm: {
            voucherid: null,
            V_Year: null,
        },
        Year: [{ years: null, YEAR: "select year" }],
    },
    watch: {
        'vm.fromdate': function () {
        'vm.V_Year': function () {
            axios.get("/api/web/GetFilterRecords?year=" + this.vm.V_Year).then((res) => {
                this.Year = res.data;
            });
          },

后端代码优化 #

1. 修正无效查询逻辑：原代码中Where(x => x.VoucherYear.Contains(x.VoucherYear))是无意义的恒真条件，且会返回重复年份。改为获取唯一年份值，避免下拉框重复选项：

[HttpGet]
[Route("api/web/GetFilterRecords")]
public List<object> GetFilterRecords(string year = null)
{
    using (ApplicationDbContext db = new ApplicationDbContext())
    {
        var years = db.Documents
                      .Select(p => p.VoucherYear)
                      .Distinct()
                      .Where(y => !string.IsNullOrEmpty(y))
                      .Select(y => new 
                      {
                          years = y,
                          YEAR = y
                      })
                      .ToList();
        return years;
    }
}

• 新增可选参数year，为后续过滤记录预留接口
• 用Distinct()去重年份
• 返回精简的匿名对象，减少数据传输

2. 拆分接口职责：建议把"获取年份列表"和"根据年份过滤记录"拆成两个独立接口，避免单一接口职责混乱。

前端代码修复 #

1. 修复Vue语法错误：原watch代码未闭合'vm.fromdate'的函数块，导致逻辑无法执行：

watch: {
    // 若fromdate无实际用途可直接删除该监听
    'vm.fromdate': function () {
        // 补全fromdate的处理逻辑（如果需要）
    },
    'vm.V_Year': function (newVal) {
        if (newVal) {
            // 调用专门的过滤记录接口，而非复用年份接口
            // axios.get("/api/web/FilterDocuments?year=" + newVal).then(res => {
            //     // 处理过滤后的记录数据
            // });
        }
    }
}

2. 调整年份列表加载时机：原逻辑是选择年份后才加载列表，逻辑颠倒。改为页面初始化时主动获取年份：

var vueContent = new Vue({
    el: '#Form',
    data: {
        vm: {
            voucherid: null,
            V_Year: null,
        },
        Year: [{ years: null, YEAR: "select year" }],
    },
    mounted() {
        // 页面挂载完成后主动请求年份列表
        axios.get("/api/web/GetFilterRecords").then((res) => {
            this.Year = [{ years: null, YEAR: "select year" }, ...res.data];
        });
    },
    watch: {
        'vm.V_Year': function (newVal) {
            if (newVal) {
                // 此处调用过滤记录的接口
            }
        }
    }
});

3. 确认select2绑定兼容性：如果使用第三方Vue-select2组件，确保v-model和选项的value字段（即option.years）与后端返回字段完全匹配，避免绑定失效。

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