Материализация CSS разборная не работает с V-для L oop в vue js - PullRequest
Новая
       43

Материализация CSS разборная не работает с V-для L oop в vue js

0 голосов
/ 01 мая 2020

Я только начал внедрять Vue JS в свой существующий проект, имея очень базовые c знания и минимальную реализацию.

Весь мой проект на Codeigniter 3 в качестве серверной среды и использует html5 , CSS3 и jQuery в качестве технологии интерфейса. Я не хочу использовать другие замещающие рамки, кроме как материализует Css, vue. js и, конечно, jQuery (по крайней мере, в течение некоторого времени, пока я полностью не ознакомлюсь с vue. js).

ну, в общем, в моем FAQ, который динамически генерируется из данных, которые я получил из базы данных; Я использую материализацию разборного. Общая структура кода: 

<span v-for="category in categories">
    <h6><i :class="category.cat_icon"></i> {{ category.title }}</h6>
    <ul class="collapsible">
        <li v-for="faq in faqs">
            <div class="collapsible-header" v-if="faq.fc_id === category.c_id"><i class="icofont-dotted-right"></i> {{ faq.q }}</div>
            <div class="collapsible-body" v-if="faq.fc_id === category.c_id"><span>{{ faq.a }} </span></div>
        </li>
    </ul>
</span>

... необходимо js файл включает в себя ... 

    <script>
    $(document).ready(function(){
       $('.collapsible').collapsible();
    });
    </script>

    <script>
    var app = new Vue({
        el: "#faq",
        data: {
            title: "Frequently Asked Questions",
            categories: [],
            faqs: [],
            recommends: []
        },
        mounted() {
           axios.get("<?php echo base_url('getFaqCategories');?>")
                .then(response => {
                    this.categories = response.data
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function(){
                    $('.collapsible').collapsible();
                }),
            axios.get("<?php echo base_url('getFaqs');?>")
                .then(response => {
                    this.faqs = response.data
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function(){
                    $('.collapsible').collapsible();
                }),
            axios.get("<?php echo base_url('recommended');?>")
                .then(response => {
                this.recommends = response.data
            })
        }
    });
    </script>

Последовательность включенных js файлов: [1] jQuery [2] материализуются. js [3] vue .мин. js [4] топор ios .мин. js

Теперь странная часть, она работает в моем локальном хосте, но после загрузки его на рабочий сервер (AWS EC2) при нажатии на список ничего не происходит.

Ошибка не отображается. Быстрое предложение приветствуется, пожалуйста, имейте в виду, что у меня есть очень c знания о vue. js.

...