当我将它绑定到 VueJS v-model 时，为什么我的 MVC RazorView textarea 被清除？

问题描述

这是我的 cshtml：

@Html.TextAreaFor(model => model.Content,new { @class="form-control",@style = "max-width:800px",@v_model = "content" })

这是我的 VueJs...

var app = new Vue({
    el: '#app-pagecontent-edit',data: {
        editorType: 'plainText',content: ''
    },methods: {
    }
})

问题是最初由 MVC 视图模型填充的数据没有显示。它在加载时被清除。这里发生了什么？我需要 MVC 和 VueJS 之间的双向绑定。

解决方法

这在 Vue documentation

中有描述

v-model 将忽略任何表单元素上的初始 value、checked 或 selected 属性。它将始终将 Vue 实例数据视为真实来源。您应该在 JavaScript 端声明初始值，在组件的 data 选项内。

如果你的 Vue 应用源代码是同一个 MVC 视图的一部分，你可以在那里分配初始值，但我不建议这样做，因为结果很难阅读和维护

唯一的另一种方法是使用某种技术，以其他方式存储初始值并在创建组件时初始化 v-model。您可以找到一些解决方案 here - 使用自定义指令似乎是一个非常清晰和优雅的解决方案...