Question

我在表单中使用了vue multiselect，并且通过axios post将选项动态化为自动完成。我仅将控制器的ID和名称返回到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模型中显示名称，我想拥有id 怎么做

Answer 1

您需要在数据和监视者中添加value的新字段，因此请尝试以下操作：

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

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

我发现了很多与此相关的问题，而程序包没有为此提供支持。

您可以在此处了解更多信息：link1，link2

祝你好运！

Answer 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();

Answer 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>

让我知道它是否成功了

Vue MultiSelect没有获得ID和名称

3 个答案: