4个input输入不同字段后,点击按钮,使用的vue-resource去请求后台,想问怎么查匹配的字段,如何把4个input的值变成参数传过去?能写下代码吗,谢谢大家
修改问题:如果是
<template>
<form></form> //这个表单
<router-view></router-view> //表单去请求,我想返回的值渲染在这里,如何传?</template>
引用我之前写过的一篇文章的例子
Get Github File
一、使用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的文档，推荐看英文版的，中文版的可能会滞后。
假设你有如下表单：
<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
});
}
}
});<input v-model="form.a1" name='a1'>
<input v-model="form.a2" name='a2'>
<input v-model="form.a3" name='a3'>
<input v-model="form.a4" name='a4'>
<input @click.prevent ="search" type="submit" name='a5'>export default {
data() {
return {
form: {
a1: '',
a2: '',
a3: '',
a4: ''
}
}
},
methods: {
search() {
this.$http.post('/someUrl', this.form).then((json) => {
// do something
});
}
}