Home > front end >  Vue element in the first two input fuzzy query input link
Vue element in the first two input fuzzy query input link

Time:12-12

HTML part style to write their own
Multiple='false'
Popper -
V - model="ruleForm. Xyr_true_name
": the fetch - Suggestions="querySearch"
Placeholder="please enter the name"
@ change='sel'
@ the select="handleSelect"







Part of carrying parameters//upload pictures

Ref="upload"
Action="upload address
"='request header: headers'
: data="https://bbs.csdn.net/topics/ruleForm"
: on - success="success"
: file - list="fileList
": auto - upload="false"
The list - type="picture" & gt;







Js part
Watch to monitor data in ruleForm: {
Xyr_true_name: "'
Xyr_card_id: "'
},
I write this because there is a upload pictures well also add
///////
Watch: {
'ruleForm. Xyr_true_name (newVal, oldVal) {
The console. The log (newVal)

This. Sel ()
The console. The log (enclosing ruleForm. Xyr_card_id)
}
},
///
Methods:
QuerySearch (the queryString, cb) {
Var restaurants=this. Restaurants;
The var results=the queryString? Restaurants. The filter (enclosing createFilter (the queryString) : restaurants;
//call the callback returns the suggestion list data
Cb (results);
},
CreateFilter (the queryString) {
Return (restaurant)=& gt; {
Return (restaurant. Xyr_xm. ToLowerCase (). The indexOf (the queryString. ToLowerCase ())===0).//query string head
//return (restaurant. Xyr_xm. IndexOf (the queryString)!=1); A fuzzy query
}
},



HandleSelect (item) {
Enclosing ruleForm. Xyr_true_name=item. Xyr_xm
The console. The log (item);
},

Sel () {
The console. The log (' name values change ')
Let cz=this. Restaurants. The filter (item=& gt; {
If (item. Xyr_xm==this. RuleForm. Xyr_true_name) {
Return the item
}
});
The console. The log (cz)//return a qualified array object [] {}
If (cz length!=0) {
This. RuleForm. Xyr_card_id=cz [0]. Xyr_sfzh
The console. The log (' cz is not null)
} else {
This. RuleForm. Xyr_card_id='
The console. The log (' cz is empty)
}

},

  • Related