.NET Core站点集成Vue.js表单：空白表单无法显示问题求助

你的问题核心是Vue初始渲染时访问未定义属性导致的报错：当新建场景（venueId=0）时，虽然后端会返回带Address的ViewModel，但在axios请求完成前，Vue实例已经开始渲染模板了——此时venue还是初始的空对象{}，没有address属性，模板里直接绑定venue.address.addressLine1就会抛出Cannot read properties of undefined (reading 'addressLine1')的错误，导致整个Vue实例挂掉，后续请求到的数据也无法正常渲染。

下面给你几个针对性的修复方案，按推荐程度排序：

方案1：初始化完整的venue结构（最推荐） #

修改Vue实例的data部分，提前给venue设置好和ViewModel对应的完整结构，包括空的address对象。这样初始渲染时所有绑定的属性都已存在，不会报错，请求完成后Vue会自动响应式更新数据：

data () {
    return {
        venue: {
            venueId: 0,
            venueName: '',
            address: {
                addressLine1: '',
                addressLine2: '',
                city: ''
            }
        }
    }
},

方案2：使用可选链操作符（Vue 3或Vue 2需额外配置） #

如果你的项目用的是Vue 3，直接在模板里用?.来避免访问undefined的属性：

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"/>

如果是Vue 2，原生不支持可选链，需要安装@vue/composition-api或vue-safe这类插件，相对方案1更繁琐，所以优先推荐方案1。

方案3：添加v-if判断确保属性存在 #

在包含address相关输入框的外层添加v-if，确保venue.address存在后再渲染：

<div v-if="venue.address">
    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"/>
</div>

不过这个方案会导致初始状态下地址输入框不显示，直到axios请求完成，用户体验不如方案1。

额外优化建议 #

1. 去掉无用的created钩子和currentevent props——你并没有用到这个props，直接在mounted里请求数据赋值即可。
2. 添加loading状态避免重复提交：

data () {
    return {
        venue: {
            venueId: 0,
            venueName: '',
            address: {
                addressLine1: '',
                addressLine2: '',
                city: ''
            }
        },
        isLoading: false
    }
},
mounted: function() {
    this.isLoading = true;
    axios.get('/venue/GetVenue', { params: { venueId: venueId } })
        .then(response => {
            this.venue = response.data;
        })
        .finally(() => {
            this.isLoading = false;
        });
},
methods: {
    sendToServer: function () {
        if (this.isLoading) return;
        this.isLoading = true;
        axios.post('/venue/SaveVenue', this.venue)
            .then(response => {
                this.venue = response.data;
                console.log("Venue Updated");
            })
            .finally(() => {
                this.isLoading = false;
            });
    }
}

然后给按钮添加禁用状态：

<button type="button" v-on:click="sendToServer" :disabled="isLoading" style="padding: 0; border: none; background: none; cursor: pointer;">
    <i class="la la-save"></i>
</button>

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