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

【问题标题】：how to pass value in v-select in vue如何在vue中的v-select中传递值
【发布时间】：2018-08-22 16:12:37
【问题描述】：

我是 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('value of v-selection not option') 例如 id 1 有 'country' 所以我希望方法 next() 中的 id 1 即在 console.log } } 现在我的问题是我如何将这个 axios 响应的成功值传递给 v-select 选项，其次这是我如何获得 v-select 的选定值，例如；- 当用户单击下一个按钮时，我如何获得选择的值在 v-select 中

【问题讨论】：

标签： vue.js v-select

【解决方案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(); 
 }

这是一个有效的 jfiddle https://jsfiddle.net/skribe/mghbLyva/3/

【讨论】：

您的代码工作正常，但如果我添加 ajax 响应然后它停止工作 this.$http.get('localhost:3000/api/categories') .then(function (response) { console.log(response.data) ; // this.category=response.data this.category=[response.data]; }) .catch(function (error) { console.log("error.response"); });即不输出
感谢工作，我只是在 ajax 外部添加 var _this=this，然后在 ajax _this.category=[response.data] 内部添加
抱歉，如果不清楚。我建议您使用.bind(this) 将this 纳入范围，因为它更干净。请参阅我上面的编辑。如果我的回答有帮助，请考虑将其标记为已接受的答案。

【解决方案2】：

我们在谈论this select component吗？最简单的用法是在您的 v-select 上放置一个 v-model 属性。那么这个变量会自动反映用户选择的值。

如果您可能需要指定选项，那么您还需要提供一个 value 属性并监听 @change。

【讨论】：

v-model select add in v-select it throw error select not define 你能告诉我一些新的例子，所以我很困惑