条件 SQL 查询 [VueJS]

Question

我正在学习 VueJS，但我无法围绕选择部分进行思考（在我的例子中，我使用了教程页面中的单选。

直到现在，我让“用户”填充唯一的搜索框，我的查询（位于 data.php 中）是这个：

    case 'list':
    $b      = new book;
    $req    = "SELECT id, isbn, ddc, title FROM book WHERE 1=1 ";
    if(strlen($search)>0) {
        $req .= "AND isbn LIKE '%$search%' OR ddc LIKE '%$search%' ";
    }

    $req.= "ORDER BY title LIMIT 0,50";

    $fields = array("id","isbn","ddc", "title");
    $res    = $c->StructList($req,$fields,"json");
    echo $res;
    break;

在 index.php 中呈现，这个视图：

Old rendition until now with only one search box - WORKING

现在，我尝试在搜索框前一步。

New version with a SELECT OPTION - NOT WORKING

我想不让一个搜索框和任何可以填写的内容（ISBN 或杜威十进制分类）看起来很愚蠢，但这是我为这次培训进行的个人培训。

我的示例中的这两种分类都来自我数据库的 2 个不同的其他表（ISBN_code 和 DDC_code）。

在我的 index.php 文件中，我遵循了 Vue.js 教程中的选择选项。

<select v-model="selected">
    <option disabled value="">Choose</option>
    <option>Through the ISBN</option>
    <option>Through the Dewey Decimal Classification</option>
</select>

<span>Selected : {{ selected }}</span><br><br>

在我的 data.php 上，现在我写道：

        $b      = new book;
    $req    = "SELECT id, isbn, ddc, title FROM book WHERE 1=1 ";
    if(strlen($search)>0) {
        $req .= "AND {{selected}} LIKE '%$search%' ";
    }

    $req.= "ORDER BY title LIMIT 0,50";

    $fields = array("id","isbn","ddc", "title");
    $res    = $c->StructList($req,$fields,"json");
    echo $res;

=> 我写了一个 1=1 是为了避免即使搜索栏（下面一行）的条件不是全字段也无法使查询正常工作。

最后在 app.js 文件中，我写道：

var vm = new Vue({
el:"#app",
data:{
    list:[],
    search:"",
    selected:''
},
mounted:function(){
    this.GetList();
},
methods:{

    GetListe:_.debounce(function(search = ""){
        var scope = this;
        $.ajax({
            url:"data.php?case=list",
            type:"POST",
            data:{search},
            success:function(res){
                scope.list = JSON.parse(res);
            },
            error:function(){
            }
        });
    },500),

},

});

我不明白如何让查询使用这种方法，用户必须先选择一个分类代码。

我应该修改我的查询还是 v-bind 一些东西？比如https://vuejs.org/v2/guide/forms.html?

谢谢大家

Answer 1

TL;DR：查看有关 Vue 中事件处理的链接：https://vuejs.org/v2/guide/events.html

现在，您的 ajax 请求不会将 selected 传递给您的 php 代码，只能搜索，因为 data 选项只有 {search}。我不确切知道 php 需要采用什么格式，但它可能类似于

{search: [searchValue], selected: [selectedValue]}

要真正触发 ajax 调用，您需要将 GetList 方法连接到由 Vue 控制的元素。根据您分享的代码，您似乎只是在使用 Vue 来控制下拉菜单，因此您可以触发这样的请求：

<select v-model="selected" v-on:change="GetList()">

就目前而言，这将触发 GetList，但不会使用您的下拉菜单。如果您修改 GetList 以获取下拉列表的值，它也会包含它：

GetList: _.debounce(function(search = ""){
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},500),

请注意，在data 行中，它指的是this.search 和this.selected。这就是您可以访问存储在data 对象中的值的方式。通过在模板的下拉列表中添加v-model="selected"，它会绑定到data 对象中的selected 属性，因此可以在使用this.selected 的方法中访问它的值。

还要注意方法的名称是GetList。您粘贴的代码是GetListe，但您尝试在mounted() 生命周期挂钩上将其调用为GetList()，所以我假设方法声明GetListe 是一个错字。

我会尝试将您的 GetList 方法连接到 select 元素上的 change 事件，也许添加一些控制台日志以更好地了解正在发生的事情，并更改下拉列表中的值几次然后查看发生什么了。我也会摆脱去抖动，只是为了简化你试图理解它。

GetList: function(search = "") {
    console.log("GetList()");
    console.log("search: " + this.search);
    console.log("selected: " + this.selected);
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},

这应该会让你朝着正确的方向前进。

下一步是将您的搜索栏也带入 vue 模板，将您的 search 数据属性绑定为搜索栏上的 v-model，并在 search 值时触发 GetList 事件也被改变了。像这样的：

<input v-model="search" v-on:change="GetList()">

再一次，在 GetList 方法中有控制台日志，尝试一下它以了解它在做什么。