Intereting Posts
Извлеките текущий DOM и напечатайте его как строку, со стилями нетронутыми Как предотвратить разрыв строки в столбце ячейки таблицы (а не отдельной ячейки)? Bootstrap 4 – На экране 3 изображения в строке с 80% высоты экрана Лучший способ делать всплывающие windows / диалоги с помощью JQuery? Может ли веб-сайт заставить браузер перейти в полноэкранный режим? Почему CSS не поддерживает отрицательное дополнение? переполнение: скрытый на div в упорядоченном списке влияет на li, ошибка Chrome? Сепараторы между элементами без хаков Имеет ли цель c функцию полосок? Что такое ? ngДля создания 2 строк возможно ли инициировать код c ++, инициированный html-событиями в minko? Flexbox Holy Grail Layout: исправленный заголовок, фиксированный левый Nav, область содержимого жидкости, исправленная правая боковая панель Datatables обновление только строк без перезагрузки таблицы jquery select dropdown игнорирует событие keydown при его открытии?

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') });