Динамическое меню или список в VueJS - PullRequest
Новая
       12

Динамическое меню или список в VueJS

0 голосов
/ 26 июня 2018

Попытка выяснить, как сделать динамический список или меню с форматом данных JSON ниже: 

        modules: [
            {
                module_id: 1,
                module_parent_id: 0,
                module_name: "Module 1",
                status: true,
                child: 
                    [
                        {
                        module_id: 2,
                        module_parent_id: 1,
                        module_name: "Module 2",
                        status: true,
                        child: 
                            [
                                {
                                module_id: 3,
                                module_parent_id: 1,
                                module_name: "Module 3",
                                status: true,
                                },
                                {
                                    module_id: 4,
                                    module_parent_id: 1,
                                    module_name: "Module 4",
                                    status: true,
                                },
                            ]
                        },
                        {
                            module_id: 5,
                            module_parent_id: 1,
                            module_name: "Module 5",
                            status: true,
                        },
                    ]
            },
            {
                module_id: 6,
                module_parent_id: 0,
                module_name: "Module 6",
                status: false
            }
        ]
    }
},

Уже пробовали использовать v-for, но он не динамический: 

<ul v-for="module in modules">
    <li>
        {{module.module_name}}
    </li>
    <ul v-for="module_child in module.child" v-if="module.child">
        <li>
            {{module_child.module_name}}
        </li>
        <ul v-for="module_sub_child in module_child.child" v-if="module_child.child">
            <li>
                {{module_sub_child.module_name}}
            </li>
        </ul>
    </ul>
</ul>

** ПРИМЕЧАНИЕ: мне нужно использовать v-for вместо создания метода, так как я использую плагин кнопки переключения Vue-JS: https://github.com/euvl/vue-js-toggle-button. Он не отображает плагин, когда я пытался выполнить метод.(Если нет другого способа сделать это, возможно, я сделаю свою собственную кнопку-переключатель ..)

Вот ожидаемый вывод для справки.

1 Ответ

0 голосов
/ 26 июня 2018

Если плагин не работает, либо вы забыли добавить Vue.use(ToggleButton)) перед его использованием, либо пытаетесь поместить его непосредственно в шаблон.

Чтобы другие компоненты работали внутри вашего, вы должны инициализироватьэто так 

import ToggleButton from 'vue-js-toggle-button'
export default {
  data: function () { . . . },
  components: {
    'toggle-button':  ToggleButton,
  },
  template: `
   <ul v-for="module in modules">
     <li>
       <toggle-button @change="onChangeEventHandler"/>
     </li>
   </ul>`
}
...