Условный SQL-запрос [VueJS]

Question

Я изучаю VueJS и не могу обернуть голову вокруг выбранной части (В моем случае я использовал выбор Single на странице учебника.

До сих пор я позволял «пользователю» заполнять уникальныеокно поиска И мой запрос (расположенный в 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, это представление:

Старое отображение до сих пор столько одно окно поиска - РАБОТАЕТ

Теперь я пытаюсь получить шаг перед окном поиска.

Новая версия с опцией SELECT - НЕ РАБОТАЕТ

Полагаю, может показаться глупым не заполнять одно окно поиска и все, что угодно (ISBN или десятичная классификация Дьюи), но это личное обучение, которое я провел для этого обучения.

Обаэта классификация в моих примерах взята из двух других таблиц моей базы данных (ISBN_code AND 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, теперь яwrote:

        $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, чтобы избежать того, чтобы запрос работал, даже если условие строки поиска (на одну строку ниже) не является полным полем.

* 1029И, наконец, в файле 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" в выпадающем списке в вашем шаблоне, он привязывается к свойству selected в объекте data, поэтому его значение можно получить в методе с помощью this.selected.

Также обратите вниманиечто имя метода GetList.Вставленный вами код - GetListe, но вы пытаетесь вызвать его на хуке жизненного цикла mounted() как GetList(), поэтому я предполагаю, что объявление метода GetListe является опечаткой.

Я быпопробуйте подключить ваш метод GetList к событию change в элементе select, возможно, добавьте несколько журналов консоли, чтобы лучше понять, что происходит, и измените значение в раскрывающемся списке несколько раз и посмотрите, что произойдет.Я бы также избавился от дебаза, просто чтобы упростить его, когда вы пытаетесь его понять.

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 в строке поиска и запустите событие GetList, когда значение search также изменится.Примерно так:

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

Опять же, запишите журналы консоли в методе GetList, поэкспериментируйте с ним, чтобы понять, что он делает.