vue.js的搜索

Question

4个input输入不同字段后,点击按钮,使用的vue-resource去请求后台,想问怎么查匹配的字段,如何把4个input的值变成参数传过去?能写下代码吗,谢谢大家

修改问题:如果是
<template>

<form></form> //这个表单
<router-view></router-view> //表单去请求,我想返回的值渲染在这里,如何传?

</template>

Answer 1

<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
      });
    }
  }

Answer 2

假设你有如下表单：

<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
           });
        }
    }
});

Answer 3

引用我之前写过的一篇文章的例子

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的文档，推荐看英文版的，中文版的可能会滞后。