有条件的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中呈现：
Old rendition until now with only one search box - WORKING
现在，我尝试在搜索框之前进行一步操作。
New version with a SELECT OPTION - NOT WORKING
我想不让一个搜索框和任何东西(ISBN或Dewey Decimal分类)填充可能看起来很愚蠢，但这是我为这次培训而进行的一次个人培训。
我的示例中的这两个分类都来自我的数据库中的另外两个不同的表(ISBN_code和DDC_code)。
在我的index.php文件中，我遵循了Vue.js教程中的select选项。
<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
Stack Overflow用户
发布于 2019-03-05 10:19:05
TL;DR:查看这个关于Vue中的事件处理的链接：https://vuejs.org/v2/guide/events.html
现在，ajax请求不会将selected传递给php代码，只会传递搜索，因为data选项只有{search}。我不知道php到底需要采用什么格式，但它可能是类似于
{search: [searchValue], selected: [selectedValue]}
要实际触发ajax调用，需要将GetList方法连接到一个由Vue控制的元素。根据您共享的代码，看起来您只是使用Vue来控制dropdown，所以您可以触发如下请求：
<select v-model="selected" v-on:change="GetList()">按照现在的情况，这将触发GetList，但不会使用您的下拉列表。如果您修改GetList以获取dropdown的值，它也将包含它：
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方法中，尝试一下它，以了解它在做什么。
https://stackoverflow.com/questions/54993029
复制相似问题