質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

915閲覧

LaravelでElement-uiを使いたいです

c_yomogi

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2018/07/25 04:59

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

vue.jsをcomponentsフォルダに入れ、<template>タグの中に<div>タグで囲んでいなかったため、それを試したら動きました。

投稿2018/07/25 09:59

c_yomogi

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問