Vue多选没有获取ID和名称答案

【问题标题】：Vue multiselect not getting id and nameVue多选没有获取ID和名称
【发布时间】：2019-12-27 09:05:53
【问题描述】：

我在表单中使用了 vue 多选，并且我已通过 axios post 将选项动态设置为自动完成。我只从控制器返回 id 和 name 到 js 文件，但它显示选项的所有属性

这是我的表格

<multiselect v-model="form.books" :options="options" :loading="isLoading" :internal-search="false" @search-change="getData" :multiple="true" :close-on-select="false" :hide-selected="true" :limit="5" :internal-search="false"></multiselect>

这是我的 vue js 文件

Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                name:  '' ,
                description:  '' ,
                valid_from:  '' ,
                valid_till:  '' ,
                discount:  '' ,
                enabled:  false,
                books:[],
            },
            isLoading: false,
            options: [],

        }
    },
    methods: {
        getData(query){
            this.isLoading = true;

            axios.post('/admin/books/find/'+query)
            .then((response) => {
                console.log(response);
                this.options = response.data;
                this.isLoading = false;
            })
            .catch((error) => {
                this.isLoading = false;
            });
        }
    }
});

这是我的控制器

public function find($books)
    {
        $search = $books;
        $books = Book::select('id','name')
                        ->where('id','like',"%$search%")
                        ->orWhere('name','like',"%$search%")
                        ->orWhere('sku','like',"%$search%")
                        ->orWhere('sale_price','like',"%$search$")
                        ->limit(5)->get();
        return $books;

    }
}

正如我们所见，我正在选择 Book Model 的 ID 和名称，但我得到了 Book 的许多这样的属性

我想在选项和 v-model 中显示我想要 id 的名称如何做到这一点

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

您的数据中需要新字段并需要 value 的观察者，因此请尝试以下操作：

<multiselect v-model="selected"...></multiselect>
data () {
    selected: []
    ...
},
watch: {
    selected (newValues) {
         this.form.books = newValues.map(obj => obj.id)
    }
}

我认为这就是你所需要的。

我发现了很多关于这个的问题，并且包没有支持。

您可以在那里阅读更多信息：link1、link2

祝你好运！

【讨论】：

但在我的 v-model 中，我得到了 object 。我只是想要那里的身份证？？如何做到这一点
好的，我在等

【解决方案2】：

DB::table('books')->select('id,name')->where('id','like',"%$search%")
                    ->orWhere('name','like',"%$search%")
                    ->orWhere('sku','like',"%$search%")
                    ->orWhere('sale_price','like',"%$search$")
                    ->limit(5)->get();

【讨论】：

【解决方案3】：

<template>
    <div> 
        <multiselect  v-model="yourForm.bindThis" :options="options" :custom-label="showItems" placeholder="Select one" :label="options.name_of_a_column_from_record" :track-by="options.id_of_record" :multiple="true"></multiselect>
    </div>
</template>

<script>
import Multiselect from 'vue-multiselect';

data(){
   return{
      options: [],
      yourForm: {
        bindThis: '',
      }
   }
},

methods:{
   showItems({data}){
      return `${data.name_of_a_column_from_record}`;
   }

}
</script>

让我知道它是否有魔力

【讨论】：