.net-core Site with Partial Vue.js Frontend Form Fields

Question

我正在尝试创建一个部分实现 Vue.js 的网站，我正在考虑使用 Vue.js据我所知，它不需要像其他 JS 框架那样的 SPA 站点，我相信这个框架满足了所需的条件。

我有一个基本表单，我想用它来创建、更新和删除对象。

数据通过调用 API 的 SAL 接收，所有创建、更新和删除调用都将通过相同的 API。

我已经能够做一个HttpGet和HttpPost来获取和更新数据，并以简单的形式显示它。

但是，当我尝试仅显示空白表单时，出现以下错误：

收到错误 我拥有的代码如下：

.cshtml 页面

@model bms.accessbookings.com.Types.ViewModels.ShowVenueViewModel
@{
ViewData["Title"] = "Venue";
}
<div  class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="m-content">
<div class="row">
<div id="venueForm">
Venue ID: <input type="text" v-model="venue.venueId" />
<br/>
Venue Name: <input type="text" v-model="venue.venueName" />
<br/>
Address: <input type="text" v- 
model="venue.address.addressLine1"/>
<br/>
Line 2: <input type="text" v- 
model="venue.address.addressLine2"/>
<br/>
City: <input type="text" v-model="venue.address.city"/>
<button type="button" v-on:click="sendToServer" 
style="padding: 0; border: none; background: none; 
cursor: pointer;">
<i class="la la-save"></i>
</button>
</div>
</div>
</div>
</div>
@section Scripts {
<script src="/js/venueform.js" type="text/javascript"></script>
}

.cs视图模型：

public class ShowVenueViewModel
{
public int VenueId { get; set; }
public string VenueName { get; set; }
public Address Address { get; set; }
}

地址元素包含第 1 行、第 2 行、城市等

场地控制器获取和发布：

[HttpGet]
[Route("GetVenue")]
public ShowVenueViewModel GetVenue(int venueId = 0)
{
ShowVenueViewModel viewModel = new ShowVenueViewModel
{
Address = new Address()
};
if (venueId > 0)
{
viewModel = _venueImplementation.GetShowVenueViewModel(venueId);
}
return viewModel;
}
[HttpPost]
[Route("SaveVenue")]
public ShowVenueViewModel SaveVenue([FromBody]ShowVenueViewModel venueViewModel)
{
return venueViewModel;
}

.js页：

$(document).ready(function() {
var venueId = window.location.pathname.substring(7);
const vm = new Vue({
el: '#venueForm',
data () {
return {
venue: {}
}
},
props: {
currentevent: Object
},
created() {
Object.assign(this.venue, this.currentevent || {});
},
mounted: function() {
axios.get('/venue/GetVenue', { params: { venueId: venueId } }).then(response => {
this.venue = response.data;
});
},
methods: {
sendToServer: function () {
var self = this;
console.log("Venue getting updated");
axios.post('/venue/SaveVenue', self.venue)
.then(response => {
this.venue = response.data;
console.log("Venue Updated");
});
}
}
});
});

目前，如果场地有项目，它会毫无问题地返回这些项目并将它们显示在表单中，我可以编辑输入并"保存"它们，然后返回新保存的信息(保存功能尚未连接到我的 BLL/SAL(。

但是，当没有返回 Venue 对象(空(时，表单根本不显示，因此无法在空白表单上输入详细信息以"保存"并创建新场地。

对 vue 来说仍然很新.js我发现很难找到不指向 CLI 或 SPA 风格站点的指南。

我在这里可能有很多错误，但如果有任何指示可以帮助我，我将不胜感激。

Answer 1

好的，您收到的错误来自您的模板(.cshtml 页面(。您需要确保 venue.address 始终具有值，或者更安全的是，在显示 venue.address.addressLine1 之前测试它是否存在。

当你在渲染函数中遇到错误时，vue 无法告诉你行号。但是你知道它在模板中的某个地方，通常不难找到。保持模板简短：-((显示的那个很好(。