前提・実現したいこと
Element公式サイトにある、「Collapse」実装したいです。
web開発初心者であるため、初歩的な質問であるかもしれません。
環境
windows10
php
laravel
element-ui
質問
公式サイトに記載されてあるコードで実行しても、expandとcollapseの切替ができません。
私はJavascriptが適用できていないのだと思ったのですが、解決方法が分かりません。
(他のElementのコンポーネントを利用してもJavaScriptが適用されていませんでした)
何が必要なファイルなのかが分からないため、参考になりそうなファイルの中身を貼ります。
情報が少ない場合、コメントを頂ければ追記いたします。
考えられそうなことがありましたら、お手数ですがご教授お願い致します。
参考
webpack.mix.js
let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');
resources/assets/js/app.js
require('./bootstrap'); window.Vue = require('vue'); import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' import locale from 'element-ui/lib/locale/lang/ja'; Vue.component('example-component', require('./components/ExampleComponent.vue')); Vue.use(ElementUI, { locale }) const app = new Vue({ el: '#app' });
resource/views/welcome.blade.php
php
1<!DOCTYPE html> 2<html lang="{{ app()->getLocale() }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <title>{{ config('app.name', 'Laravel') }}</title> 12 13 <!-- Styles --> 14 <link rel="stylesheet" href="{{ mix('css/app.css') }}"> 15 <style> 16 .el-menu-vertical-demo:not(.el-menu--collapse) { 17 width: 200px; 18 min-height: 400px; 19 } 20 </style> 21</head> 22<body> 23<div> 24 25 <div id="app"> 26 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> 27 <el-radio-button :label="false">expand</el-radio-button> 28 <el-radio-button :label="true">collapse</el-radio-button> 29 </el-radio-group> 30 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> 31 <el-submenu index="1"> 32 <template slot="title"> 33 <i class="el-icon-location"></i> 34 <span slot="title">Navigator One</span> 35 </template> 36 <el-menu-item-group> 37 <span slot="title">Group One</span> 38 <el-menu-item index="1-1">item one</el-menu-item> 39 <el-menu-item index="1-2">item two</el-menu-item> 40 </el-menu-item-group> 41 <el-menu-item-group title="Group Two"> 42 <el-menu-item index="1-3">item three</el-menu-item> 43 </el-menu-item-group> 44 <el-submenu index="1-4"> 45 <span slot="title">item four</span> 46 <el-menu-item index="1-4-1">item one</el-menu-item> 47 </el-submenu> 48 </el-submenu> 49 <el-menu-item index="2"> 50 <i class="el-icon-menu"></i> 51 <span slot="title">Navigator Two</span> 52 </el-menu-item> 53 <el-menu-item index="3" disabled> 54 <i class="el-icon-document"></i> 55 <span slot="title">Navigator Three</span> 56 </el-menu-item> 57 <el-menu-item index="4"> 58 <i class="el-icon-setting"></i> 59 <span slot="title">Navigator Four</span> 60 </el-menu-item> 61 </el-menu> 62 </div> 63</div> 64 65<!-- Scripts --> 66<script src="{{ mix('/js/app.js') }}"></script> 67 68<script> 69 export default { 70 data() { 71 return { 72 isCollapse: true 73 }; 74 }, 75 methods: { 76 handleOpen(key, keyPath) { 77 console.log(key, keyPath); 78 }, 79 handleClose(key, keyPath) { 80 console.log(key, keyPath); 81 } 82 } 83 } 84</script> 85 86</body> 87</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。