LaravelでVue.jsを使いたい

htmlファイルで、vue.jsを使用し、テキストの残りの文字数を表示する機能を作成しました。
![

これをLaravelで表示させようとしたところ、アクセスはできるのですがレンダリングされません。
Vue.jsのインストールをし、Laravelに元から入っているexample-componentは表示することができました。
以下、ソースコードです。

/resources/js/components/Test.vue

Laravel
1<template>
2    <div>
3        <textarea  v-model="myText"></textarea>
4        <p v-bind:style="{color: computedColor}">残り {{ remaining }} 文字です。</p>
5    </div>
6</template>
7<script>
8    export default{
9        el: '#app',
10        data(){
11            return{
12            myText:''
13            }
14        },
15        computed: {
16            // myTextの長さが変わったら、残りの文字数を算出する
17            remaining: function() {
18                return 140 - this.myText.length;
19            },
20            // remainingが変わったら、computedColorを算出する
21            computedColor: function() {
22                col = "green";
23                if (this.remaining < 20) {
24                    col = "orange";
25                }
26                if (this.remaining < 1) {
27                    col = "red";
28                }
29                return col;
30            }
31        }
32    }
33</script>

/resources/js/app.js

Laravel
1require('./bootstrap');
2
3window.Vue = require('vue');
4
5/**
6 * The following block of code may be used to automatically register your
7 * Vue components. It will recursively scan this directory for the Vue
8 * components and automatically register them with their "basename".
9 *
10 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
11 */
12
13// const files = require.context('./', true, /.vue$/i)
14// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
15
16Vue.component('example-component', require('./components/ExampleComponent.vue').default);
17Vue.component('test', require('./components/Test.vue').default);
18/**
19 * Next, we will create a fresh Vue application instance and attach it to
20 * the page. Then, you may begin adding components to this application
21 * or customize the JavaScript scaffolding to fit your unique needs.
22 */
23
24const app = new Vue({
25    el: '#app'
26});

表示させたい部分

Laravel
1<div id="app">
2  <test></test>
3</div>

ご回答お願いいたします。

追記ファイル読み込み部分です

Laravel
1<head>
2  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
4  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
5  <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
6  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
7  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
9  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
10  <script src="{{ asset('js/app.js') }}" defer></script>
11</head>

hota1024

2019/01/31 03:54

npm run devなどでビルドは行いましたか？

moko888

2019/01/31 03:57

しました。

noka_blank

2019/01/31 04:41

具体的にどううまくいかないか追記した方が回答を得やすいと思います。 http://localhost:8000にアクセスできない、アクセスできるがレンダリングされない、Chromeのコンソールでエラーが出ている、などです。

moko888

2019/01/31 04:45

修正しました。アクセスはできるのですが、レンダリングされません。

noka_blank

2019/01/31 04:51

Laravelはデフォルトではwelcome.blade.phpがホーム画面に表示されると思います。そのphpファイルを追記できますでしょうか？

moko888

2019/01/31 04:56

すみません。サイト作成の途中でして、デフォルト画面のphpファイルがありません。他に追記すべきものありますか？

noka_blank

2019/01/31 05:02

vueのコンポーネントを表示するためには、<script src="{{mix('/js/app.js')}}"></script>のように、app.jsをLaravelのviewファイルから呼んであげる必要があるのですが、そこがどのようになっているのか知りたいです。それがわかると問題の切り分けができると思いまして。

moko888

2019/01/31 05:57 編集

なるほど... 一応ファイル読み込み部分を追記しました。

noka_blank

2019/01/31 13:06

ExampleComponentが表示できていた、と書いてありましたね、、、すいません。追記いただいた「ファイル読み込み部分」は無関係でした。

行動規範の内容に同意します

回答1件

ベストアンサー

自分の環境で試してみたところ、以下のようにTestコンポーネントを修正することで解決できました。

vue
1<template>
2    <div>
3        <textarea  v-model="myText"></textarea>
4        <p v-bind:style="{color: computedColor}">残り {{ remaining }} 文字です。</p>
5    </div>
6</template>
7<script>
8    export default{
9        el: '#app',
10        data(){
11            return{
12            myText:''
13            }
14        },
15        computed: {
16            // myTextの長さが変わったら、残りの文字数を算出する
17            remaining: function() {
18                return 140 - this.myText.length;
19            },
20            // remainingが変わったら、computedColorを算出する
21            computedColor: function() {
22                //col = "green";
23                let col = "green"; // <- letを追加することで解決しました。
24                if (this.remaining < 20) {
25                    col = "orange";
26                }
27                if (this.remaining < 1) {
28                    col = "red";
29                }
30                return col;
31            }
32        }
33    }
34</script>

Chromeのコンソールで以下のようなエラーがでていたので、参考になるかもしれません。

Error in render: "ReferenceError: col is not defined"

投稿2019/01/31 13:05

noka_blank

総合スコア252

moko888

2019/01/31 14:26

実装できました。本当にありがとうございました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

LaravelでVue.jsを使いたい

関連した質問