vue.js - Vue.js 组件表单发送空值
问题描述
模型是实体。没有错误被抛出。表单被提交并保存了一个新实体。但是,描述和标题都记录为“nil”。到这里是src/components/NewEntity.vue
:
<template>
<div class="entities">
<h1>Add Entity</h1>
<div class="form">
<div>
<input type="text" name="title" placeholder="TITLE" v-model="title">
</div>
<div>
<textarea rows="15" cols="15" placeholder="DESCRIPTION" v-model="description"></textarea>
</div>
<div>
<button class="app_entity_btn" @click="addEntity">Add</button>
</div>
</div>
</div>
</template>
<script>
import EntitiesService from '@/services/EntitiesService'
export default {
name: 'NewEntity',
data () {
return {
title: '',
description: ''
}
},
methods: {
async addEntity () {
await EntitiesService.addEntity({
title: this.title,
description: this.description
})
this.$router.push({ name: 'Entities' })
}
}
}
</script>
这里是脚本导入的地方(出于某种原因,最初不允许我包含 Services/Api.js):
services/EntitiesServices:
import Api from '@/services/Api'
export default {
fetchEntities () {
return Api().get('/entities')
},
addEntity (params) {
return Api().post('entities', {
title: params.title,
description: this.description
})
}
services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}
解决方案
根据您的服务器,您需要以两种可能的方式在您的 post 函数中“字符串化”您的参数对象。如果您的服务器接受 JSON,则:
return Api().post('entities',
JSON.stringify({
title: params.title,
description: this.description
})
)
如果您的服务器不接受 JSON,则必须使用querystring模块将对象转换为编码的 URL 参数:
var qs = require('querystring');
return Api().post('entities',
qs.stringify({
title: params.title,
description: this.description
})
)
推荐阅读
- dax - DAX PowerPivot 函数忽略一周中的特定日期
- java - 为什么 defaultViewInclusion 会忽略 @JsonView 并打印每个字段?
- sql - 使用月/小时选择时遇到问题
- javascript - 从 setInterval 调用方法的两种方式之间的区别
- angularjs - 使用angularJs在离子1中获取设备令牌时出错
- spring-batch - Spring批处理:多线程步骤错误配置
- java - 将 imageProxy 转换为位图时,cameraX 图像已关闭
- delegates - C# Reflection/NUnit - 位于对象实例的公共字段中的 Func 是私有的。为什么?我如何包装它以使其公开?
- grpc - java - 如何从java中的grpc请求中获取请求头?
- powerbi - 在 Power BI 中合并两个表