我正在学习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的例子一样
谢谢你们
发布于 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
复制相似问题