You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
willaengine/resources/js/components/Inputs/SelectPicker.vue

73 lines
1.3 KiB

<template>
<div>
<select class="form-control selectpicker" data-live-search="liveSearch">
<option v-for="(option, index) in options" :key="index",
:value="option.value"
:selected="option.selected"
v-text="option.title">
</option>
</select>
</div>
</template>
<script>
export default {
props: {
liveSearch: { default: true }
},
mounted() {
const $selectpicker = $(this.$el).find(".selectpicker");
$selectpicker
.selectpicker()
.on("changed.bs.select", () =>
this.$emit("change", this.options[$selectpicker.val()])
);
},
updated() {
$(this.$el)
.find(".selectpicker")
.selectpicker("refresh");
},
destroyed() {
$(this.$el)
.find(".selectpicker")
.off()
.selectpicker("destroy");
},
computed: {
options() {
return [
{
value: "asdfadf",
title: "asfd",
selected: false
},
{
value: "asdfadfasdfasd",
title: "asdf",
selected: true
}
];
}
}
};
</script>
<style>
.bootstrap-select .dropdown-toggle .filter-option {
text-align: right !important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner {
padding-right: 0;
padding-left: inherit;
}
.dropdown-toggle::after {
float: left;
}
</style>