4个input输入不同字段后,点击按钮,使用的vue-resource去请求后台,想问怎么查匹配的字段,如何把4个input的值变成参数传过去?能写下代码吗,谢谢大家
修改问题:如果是
<template>
<form></form> //这个表单
<router-view></router-view> //表单去请求,我想返回的值渲染在这里,如何传?
</template>
4个input输入不同字段后,点击按钮,使用的vue-resource去请求后台,想问怎么查匹配的字段,如何把4个input的值变成参数传过去?能写下代码吗,谢谢大家
修改问题:如果是
<template>
<form></form> //这个表单
<router-view></router-view> //表单去请求,我想返回的值渲染在这里,如何传?
</template>
假设你有如下表单:
<form id="app" name="testForm" v-on:submit.prevent="onSubmit($event)">
<input type="text" name="username" v-model="username">
<input type="password" name="password" v-model="password">
<input type="submit" value="提交">
</form>
js可以这么拿数据:
var amount = new Vue({
el: '#app',
data: function(){
return {
username: '',
password: ''
};
},
methods: {
onSubmit: function (e) {
//这里就可以拦截下来submit,并转换成你需要的vue-resource了
this.$http.post('xxxxurl', {
username: this.username,
password: this.password
});
}
}
});
引用我之前写过的一篇文章的例子
一、使用Props父子组件间通讯(不推荐)
假定下面的template出现在App.vue里
App.vue为父组件,form和router-view为子组件,就是说form
子组件接收的username
,同步到App.vue父组件,再同步到router-view
子组件。
例如:
<template>
<form :username.sync="username"></form> //这个表单
<router-view :username.sync="username"></router-view> //表单去请求,我想返回的值渲染在这里,如何传?
</template>
二、使用vuex管理状态(推荐)
把form组件处理的结果保存到vuex的state
里,那么其他组件可以通过getters
拿到。可以看看vuex的文档,推荐看英文版的,中文版的可能会滞后。
6 回答2.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
6 回答1.1k 阅读
2 回答1.7k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
4 回答2.2k 阅读