Условный SQL-запрос [VueJS]
Я изучаю 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 это представление:
Старая версия до сих пор только с одним окном поиска - РАБОТАЕТ
Теперь я пытаюсь сделать шаг перед окном поиска.
Новая версия с ОПЦИЕЙ ВЫБРАТЬ - НЕ РАБОТАЕТ
Я предполагаю, что это может выглядеть глупо, не позволяя заполнить одно окно поиска и что угодно (ISBN или десятичную классификацию Дьюи), но это личное обучение, которое я прошел для этого обучения.
Обе эти классификации в моих примерах взяты из двух других таблиц моей базы данных (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?
Спасибо, парни
Ответы 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.info("GetList()");
console.info("search: " + this.search);
console.info("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, немного поэкспериментируйте с ним, чтобы понять, что он делает.
Спасибо глубоко Адам