Selectpicker не работает, когда я пытаюсь отображать данные JSON с помощью vue js?

Когда я пишу $ (‘. Selectpicker’). Selectpicker (‘refresh’); в консоли он загружается. Где я должен предоставить этот код?

Мой HTML-код

{{post.name}}
{{so.name}}

Мой скрипт vue js приведен ниже. Я добавил скрипт в mount (), но для меня ничего не происходит. Но когда я набираю консоль, появляется раскрывающийся список

   categories = new Vue({ el: '#categories', data: { articles: [], services: [], category: 0, subcategory: 0, content: false }, watch: { subcategory: function(e) { this.prefetch(); }, category: function() { var self = this; self.subcategory = 0; $.ajax({ url: "https://n2s.herokuapp.com/api/post/get_all_services/", data: { 'service': self.id }, type: "POST", dataType: "JSON", success: function(e) { console.log('Loading services'); console.log(self.category); let categoryIdArray = self.articles.filter(x=>x.name==self.category); console.log(categoryIdArray); self.services = e.filter(x=>x.cat_id==categoryIdArray[0].cat_id); console.log(self.services); self.prefetch(); } }); }, }, mounted: function() { $('.selectpicker').selectpicker('refresh'); var vm = this; $.ajax({ url: "https://n2s.herokuapp.com/api/post/get_all_category/", method: "GET", dataType: "JSON", success: function(e) { console.log(e); vm.articles = e; console.log(vm); }, }); }, })  

Есть ли способ инициализировать select picker? Пожалуйста, помогите мне.

РЕДАКТИРОВАТЬ

Хорошо, теперь я понимаю, что вы хотите сделать … Вы хотите использовать плагин boostrap-select и Vue.

Прежде всего, ваши зависимости ошибочны, плагин не совместим с более новой версией jQuery и Bootstrap, я использовал точно такие же версии, которые находятся на странице примера плагина.

Во-вторых, Vue обновляет значения параметров, после чего плагин отображает выделение, поэтому вы не видите раскрывающееся меню. Правильный способ заключается в том, чтобы импортировать плагин после вызовов ajax, но для вашего случая вы должны повторно отобразить плагин при возврате вызовов. Если вы вызываете метод обновления в смонтированном режиме, снова выполняется слишком рано. Чтобы обойти это, вы можете поместить обновление в таймаут, чтобы поместить его в конец цикла дайджеста. Проверьте это .

Это всего лишь обходной путь, вы должны работать над импортом и правильно обновлять плагин.


Чтобы предварительно загрузить значения в selectPicker вы должны инициализировать значения vm.category и vm.subcategory . Вы можете сделать это в методе mounted() .

Вот пример (я использовал async / await для ускорения кодирования):

 async mounted() { var vm = this; //First thing GET all the articles vm.articles = await $.ajax({ url: "https://n2s.herokuapp.com/api/post/get_all_category/", method: "GET", dataType: "JSON" }); //Select the first result as your category (you should check if there are articles) vm.category = vm.articles[0].cat_id //Here you get the services... really strange WS since it returns all the services, not filtered by category... vm.allServices = await $.ajax({ url: "https://n2s.herokuapp.com/api/post/get_all_services/", data: { 'service': vm.category //???? }, type: "POST", dataType: "JSON" }) //... so we have to filter them in the client! vm.services = vm.allServices.filter(s => s.cat_id === vm.category); //Now select the subcategory to preload it vm.subcategory = vm.services[0].sub_cat_id; //You can call the fetch WS to get the content with category and subcategory this.prefetch(); } 

Вы также должны изменить post.cat_id представление и установить v-bind:value= для post.cat_id и so.sub_cat_id .

Вот вам.

Попробуйте этот код:

 $(window).load(function () { $('.selectpicker').selectpicker('refresh') });