ホーム > 技術系 > Vue

Vueのアーカイブ

Vue3で単一ファイルコンポーネントにpropsで値を受け渡す方法

Vue3で、単一ファイルコンポーネントにpropsで値を受け渡す方法についてのメモです。

親コンポーネント側の記述

下記では、Controllerから埋め込んだidという変数を、子コンポーネントのTestComponentに渡しています。

<div id="app">
    <test id="{{ $id }}"></test>
</div>

子Component側の記述

子Component側が、受け渡された値を使用するには、propsで名前を指定する必要があります。

<template>
    <div>親コンポーネントから渡された値:{{ id }}</div>
</template>

<script>
    module.exports = {
        props: ['id'],
        data() {
            return {
                ''
            }
        },
    }
</script>

laravel8のVueをVue2からVue3にバージョンアップした

作っていたサイトのLaravelと使っていたVueのバージョンが2系だったのから3系にバージョンアップしました。

以下、手順についてのメモです。

Vueのバージョンの確認方法

プロジェクトフォルダで

npm list vue

[email protected]

2系な模様。これを3系に上げたい

package.jsonの編集

プロジェクトフォルダのpackage.jsonを編集します。

まずは編集前に、package.jsonをバックアップ後、以下の記述を削除


"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"

Vue3のインストールを実行

Vue3のインストールをnpmで実行します。

npm install -save-dev [email protected]

その後、再び vue のバージョンを確認

npm list vue

[email protected]

Vue3系に上がってる!

num run dev を実行。

変なエラーが出る。丁寧に以下のコマンドを実行しろということ。

npm install @vue/compiler-sfc [email protected]^16.1.0 –save-dev –legacy-peer-deps

上記を実行後、npm run devを実行。

問題なく実行できました。

そして、あとはアプリ側のVueのソースを、Vue3のプログラムに書き直します。

これは、ここのサイトを参考にさせていただきました。

Vue 3 を Laravel 8で使う方法(npm) | console dot log

これで、うまく行った・・・かと思いきや、ローカルではうまく動いたのに、本番環境ではテストプログラムが動作しません。

散々調べた挙げく、原因が分かりました。

CDNのキャッシュ

Laravel + Vueでは、npm run devで、app.jsをビルドするのですが、

これが、古いファイルがCDNにキャッシュされてエラーになっていたのが原因でした。

CDNのキャッシュをクリアすることで、無事に表示されることになりました。

と、ここまででようやくLaravel8 + Vue3で基本的なプログラムが表示できたのですが、スタート地点に立つだけでも大変ですね・・・。

Laravel+Vueで、Componentを更新しても反映されない

Laravel8+Vueでサイトを構築中、VueのComponentのファイルを更新しても、何故か画面に反映されなくて困りました。

具体的にいうと、デフォルトでLaravelでVueを有効にすると入ってくるExample Componentがあります。

ファイルの場所は、Laravelのルートディレクトリ以下の

/resources/js/components/ExampleComponent.js

があります。

このファイル内容をテストで更新してみたのですが、画面に反映されないのです。

謎…。

で、調べてみたところ、ルートディレクトリで

npm rum dev

をしないと更新されないということ。

なんだそれ、分かりにく・・・

しかし試しに実行で、エラー

Error: Cannot find module ‘../package.json’

で、調べてみると、node_modueを再インストールしてみたらいいということです。

rm -rf ./npm_modules

npm install

で、node_moduleを再インストールで、

npm rum dev を実行

今度はエラーがでず・・・

で、サイトを見に行くと、、、、

更新されていない orz

で、ブラウザのキャッシュを削除すると・・・・

更新されました!!

というわけで、分かりにくかったですが、何とかComponentを更新するところまではたどり着きました。

ただこれだけのことで、最初は大変・・・

ホーム > 技術系 > Vue

フィード

ページの上部に戻る