VueJS <v-select> 发布时不绑定

Posted 2023-02-23

【中文标题】VueJS <v-select> 发布时不绑定

【英文标题】：VueJS <v-select> doesn't bind when posting

【发布时间】：2019-05-06 13:43:09

【问题描述】：

我正在前端使用 VueJS 开发一个 asp.net mvc 应用程序。我有一堆表单，虽然在提交表单时文本字段可以正常工作（这意味着我可以看到它与视图模型绑定，并且我可以看到在表单上输入的值）<v-select> 不是这种情况@

这是我所拥有的：

<v-select clearable :items="options" 
                item-text="name"
                label="Months" v-model="Month"></v-select>

我希望它会与myViewModel.Month 绑定，但它没有。

我可以将v-select 与隐藏字段绑定，隐藏字段的值将与我的视图模型绑定，但这是一个额外的步骤（和元素）。

我是 VueJS 的新手，所以如果有人可以给我一些指示。谢谢。

更新：

我的代码如下所示：https://codepen.io/anon/pen/EOzrgV

问题不是关于 Vue 中的模型绑定，而是与我的 C# ViewModel 的模型绑定。例如，我有以下控制器：

    public ActionResult Member()
    
        if (!LoggedIn)
            return RedirectToAction("Index");
        MemberViewModel model = new MemberViewModel();
        return View(model);
    
    [HttpPost]
    public ActionResult Member(MemberViewModel model)
    
        if(ModelState.IsValid)
        
            // Here I can see value of model.name
            // But model.month is always empty
            //model.Save();
        
        return View(model);
    

【问题讨论】：

你能给我们看看你的 JS 像 data() part atleast

添加到上面的原始帖子中。

你的后端应用只是一个 API 吗？我认为您需要手动将这些数据发送给您的 C# 控制器

嗨@Jérôme 这是一个后端应用程序。绑定问题只在v-select 上，我不需要对v-text-field 做任何特别的事情。分配与我的视图模型的属性名称相同的名称属性符合我的预期。

【参考方案1】：

如果你的数据对象看起来像

data: 
  myViewModel: 
    Month: '',
  ,  

你需要像myViewModel.Month一样绑定它

<v-select clearable
  :items="options" 
  item-text="name"
  label="Months"
  v-model="myViewModel.Month"
></v-select>

我这里做了一个例子：https://jsfiddle.net/kIINAMITE/eywraw8t/491056/

【讨论】：

这是我遇到问题的与 C# 视图模型的绑定。谢谢。