Question

我刚接触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

中

Answer 1

您需要将选项绑定到类别。即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/

Answer 2

我们在谈论this select component吗？最简单的用法是在v-select上添加v-model属性。然后，此变量将自动反映用户选择的值。

如果您需要指定选项，那么您还需要提供一个值prop并监听@change。

如何在vue中传递v-select中的值

2 个答案: