0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【メモ】Laravel × Vue.jsでのハマった事

Posted at

まず,初学者です。
メモです。

#何が起こったか

Vueでボタンを作成しlaravelのblade内にコンポーネントで適用しようとした所,全然表示されない。という事が起こりました。

~~.blade.php
<div class="content">

    <div id="app">
        <example-component></example-component>
    </div>
    
    <script src="{{ mix('js/app.js') }}"></script>

</div>

って感じでこのcontentのdivが5つぐらいあったんだけど,

    <div id="app">
        <example-component></example-component>
    </div>
    
    <script src="{{ mix('js/app.js') }}"></script>

これをその5つのcontent内にコピペすれば,表示されるんじゃないかと思ったんだけど1個しか表示されないという。
コンポーネントのやり方違うのか??ってめちゃ考えてたり,調べたりしたんだけど全然わからなく、、、、
諦めずに調べていたら(https://note.com/hokurojump/n/n8fc0948f42fe)
パッと閃いたんですよね。
これ下記を1個1個にやるんじゃなくて,全体に囲んだらいいんじゃね?と、、

<div id="app">
<div>

いや,最初からわかるだろ!!!!とツコッミたくなると思うけど我慢して下さい(笑)

ということで

#解決

~~.blade.php
<div id="app">
    <div class="content">

        <example-component></example-component>

    </div>
    <div class="content">

        <example-component></example-component>

    </div>
    <div class="content">

        <example-component></example-component>
    
    </div>
</div>
    <script src="{{ mix('js/app.js') }}"></script>


全部に適用されました!!!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?