我刚接触vue(版本2.5)在我的项目中我已经安装了v-select我浏览文档并且混淆了几件事 这是我的代码
<template>
<div class="wrapper">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Category</label>
<v-select label="category_desc" options="category"></v-select>
</div>
</div>
</div>
<button type="button" variant="primary" class="px-4" @click.prevent="next()">next</button>
</div>
</template>
<script>
export default {
name: 'Addproduct',
data () {
return {
category:[]
}
},
mounted() {
this.$http.get('http://localhost:3000/api/categories') .then(function (response) {
console.log(response.data);
this.category=response.data
})
.catch(function (error) {
console.log("error.response");
});
},
方法:{ 下一个(){ // console.log(&#39; v-selection的值不是选项&#39;)例如id 1有&#39; country&#39;所以我想在方法next()中的id 1,即在console.log中 } } 现在我的问题是我如何通过这个axios响应v-select选项的成功值,其次我如何获得v-select的选择值例如; - 当用户点击下一个按钮我怎么能得到哪个值被选中在v-select
中答案 0 :(得分:2)
您需要将选项绑定到类别。即v-bind:options
或短手:options
我还建议您使用方法进行ajax调用,然后在mounted()
中调用该方法。你也可能想要选择v-model
,所以我在示例中添加了 <v-select v-model="selectedCategory" label="category_desc" :options="category"></v-select>
。
首先在你的模板中......
data(){
return{
category:[],
selectedCategory: null,
}
},
methods:{
getCategories(){
this.$http.get('http://localhost:3000/api/categories')
.then(function (response) {
this.category=response.data
}.bind(this))
.catch(function (error) {
console.log("error.response");
});
}
},
mounted(){
this.getCategories();
}
然后在你的脚本定义中......
func refresh(param: NSInteger, completion: (Void) -> ()) -> Void {
let absolutePath = "MY SAMPLE API"
var headers: [String: String] = Dictionary<String, String>();
headers["Content-Type"] = "application/json"
print("\nEntered ", param)
Alamofire.request(absolutePath, method: .get, parameters: nil, encoding: JSONEncoding.default, headers: headers).responseString {
response in
switch response.result {
case .success:
completion()
break
case .failure(let error):
completion()
}
}
}
//In viewDidLoad :- Add these below code
// Create one custom queue.
let serialQueue = DispatchQueue(label: "serialQueue")
// Create one dispacth group.
let dispatchGorup = DispatchGroup()
//Call first refresh method with respective parameters.
dispatchGorup.enter()
//Wait for the response and then call leave method.
refresh(param: "") { (result) in
dispatchGorup.leave()
}
//Call second refresh method with respective parameters.
dispatchGorup.enter()
//Wait for the response and then call leave method.
refresh(param: "") { (result) in
dispatchGorup.leave()
}
//Indication that all the request is done.
dispatchGorup.notify(queue: serialQueue) {
Print("All methods invoked")
}
这是一个有效的jfiddle https://jsfiddle.net/skribe/mghbLyva/3/
答案 1 :(得分:0)
我们在谈论this select component吗?最简单的用法是在v-select上添加v-model属性。然后,此变量将自动反映用户选择的值。
如果您需要指定选项,那么您还需要提供一个值prop并监听@change。