使用Vue + PHP进行实时搜索

Question

我有一个实时搜索表单，它可以正常工作，但是我想添加下拉菜单，从中可以选择需要在其中进行搜索的数据库。尝试了许多变体，但未成功。由于我不了解，我需要向axios post函数添加第二个参数“ selected”，该函数会将所有请求发送到php文件。有什么想法吗？

这是我的代码：

JavaScript

var app = new Vue({
    el: '#myapp',
    data: {
        members: [],
                selected: "",
        search: {keyword: ''},
        noMember: false
    },

    mounted: function(){
        this.fetchMembers();
    },

    methods:{
        searchMonitor: function() {
            var keyword = app.toFormData(app.search);
            axios.post('action.php?action=search', keyword)
                .then(function(response){
                    app.members = response.data.members;

                    if(response.data.members == ''){
                        app.noMember = true;
                    }
                    else{
                        app.noMember = false;
                    }
                });
        },

        fetchMembers: function(){
            axios.post('action.php')
                .then(function(response){
                    app.members = response.data.members;
                });
        },

        toFormData: function(obj){
            var form_data = new FormData();
            for(var key in obj){
                form_data.append(key, obj[key]);
            }
            return form_data;
        },

    }
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="myapp">
    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-4 col-md-offset-8">
                    <h3>
                        <select  data-style="btn-info" v-model="selected">
                            <option selected="selected" value="1">Search in both DB</option>
                            <option  value="2">Search in DB1</option>
                            <option  value="3">Search in DB2</option>
                        </select>
                    </h3>

                    <input type="text" class="form-control" placeholder="Search" v-on:keyup="searchMonitor" v-model="search.keyword">
                </div>
            </div>
            <div style="height:5px;"></div>
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </thead>
                <tbody>
                    <tr v-if="noMember">
                        <td colspan="3" align="center">No member match your search</td>
                    </tr>
                    <tr v-for="member in members">
                        <td>{{ member.first_name }}</td>
                        <td>{{ member.last_name }}</td>
                        <td>{{ member.email }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

PHP

<?php
$conn = new mysqli("localhost", "root", "", "vuetot");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$out = array('error' => false);

$action="show";

if(isset($_GET['action'])){
    $action=$_GET['action'];
}

if($action=='show'){
    $sql = "select * from members";
    $query = $conn->query($sql);
    $members = array();

    while($row = $query->fetch_array()){
        array_push($members, $row);
    }

    $out['members'] = $members;
}

if($action=='search'){
    $keyword=$_POST['keyword'];
    $sql="select * from members where first_name like '%$keyword%' or last_name like '%$keyword%' or email like '%$keyword%'";
    $query = $conn->query($sql);
    $members = array();

    while($row = $query->fetch_array()){
        array_push($members, $row);
    }

    $out['members'] = $members;
}

$conn->close();

header("Content-type: application/json");
echo json_encode($out);
die();

?>