今天写代码的时候发现我的参数出现了问题导致开发停滞
首先,我初始化后通过query取到了singerId和singerName的值
data() {
return {
singerId:'',
singerName:'',
}
}
created() {
this.singerId=this.$route.query.id;
this.singerName=this.$route.query.name;
console.log(this.singerId,this.singerName);
this.getData();
},
然后我通过el-dialog向我的数据库中添加歌曲
<el-dialog title="添加歌曲" v-model="centerDialogVisible">
<el-form id="add-song"
label-width="120px"
:model="registerForm"
>
<el-form-item label="歌曲名">
<el-input type="text" name="name" v-model="registerForm.name"></el-input>
</el-form-item>
<el-form-item label="专辑">
<el-input type="text" name="introduction" v-model="registerForm.introduction"></el-input>
</el-form-item>
<el-form-item label="歌词">
<el-input type="textarea" name="lyric" v-model="registerForm.lyric"></el-input>
</el-form-item>
<el-form-item label="歌曲上传">
<input type="file"
name="song" />
</el-form-item>
</el-form>
<template #footer>
<span class="footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addSong">确 定</el-button>
</span>
</template>
</el-dialog>
这里可以看到我歌曲的id是5,歌手的id是1
<el-table-column prop="singerId" label="singerId" align="center" width="120"></el-table-column>
<el-table-column prop="id" label="ID" align="center" width="120"></el-table-column>
但从页面中可以发现我的singerID覆盖掉了id的值,而它自己却是一个空的值
向请教一下是哪里出了问题