Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Vue JS selectpicker sorunu

Leon

Merhabalar,

component dosyamdaki template

<template>
    <div>
        <div class="form-group position-relative mb-1">
            <label>{{dilulke}} <span class="text-danger">*</span></label>
            <select class="form-control selectpicker" v-model="ulke" name="ulke" required="" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">
                <option v-for="(item, index) in ulkeler" v-bind:value="index">
                    {{item}}
                </option>
            </select>
        </div>
    </div>
</template>

test.blade.php dosyam.
<testcompnt :ulkeler="{{@$ulkeler}}" placeholdersehir="{{__('Şehir')}}" placeholderilce="{{__('ilce')}}" dilulke="{{__('Ülke')}}" dilsehir="{{__('Şehir')}}" dililce="{{__('İlçe')}}"></testcompnt>

Bilgiler geliyor v-for ile döngüye giriyor. Fakat ilk tıkladığımda selectbox açılmıyor, tekrar tıklayınca selectbox içerisindeki liste açılıyor. Bu acaba neden kaynaklanıyor olabilir? console da herhangi bir hata almıyorum.

Leon

Terminalde bootstrap-select kurmak için aşağıdaki komutu kullandım.

npm install bootstrap-select
kurulumunu yaptıktan sonra resources/js/bootstrap.js dosyamdaki aşağıdaki satırları

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

aşağıdaki gibi değiştirdim ve düzeldi.

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('bootstrap-select');
} catch (e) {}

Bir de resources/sass/app.scss dosyamızıda aşağıdaki gibi düzenliyoruz ve bootstrap-select css dosyamızı dahil etmiş oluyoruz;

// Fonts
//@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import '~bootstrap-select/sass/bootstrap-select';