【Laravel7】Vue.jsで文字数をリアルタイムにカウントする方法。エラーは出ないけど数値が変わらないときの対処法
正常に動くコードは以下
元のコードは↓
https://codepen.io/takapen/pen/arvdxX
確認するファイル一覧
・webpack.mix.js
jsのディレクトリを指定する。
・resources/js/app.js
ここにスクリプトを書く。
・public/js/app.js
上記のresourcesに書いて、npm run devをターミナルで実行すると、public/jsディレクトリに同名のjsファイルができる。
・views/post/create
<div id="app1">
<p>
<input v-model="myText" id="body1" name="body1"
class="form-control {{ $errors->has('body1') ? 'is-invalid' : '' }}" rows="4"
value="{{ old('body1') }}" type="text">
</p>
// @{{ remaining }}と、@をつけないとエラーが起きる。
// bladeとvue.jsの書き方がかぶってしまっていることが原因らしい。
<p v-bind:style="{color: computedColor}">残り@{{ remaining }}文字</p>
</div>
・views/layouts/app.blade.php
</body>の直上にvue.jsのCDNとapp.jsへのリンクをはっている。
<!-- vue.jsのCDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="{{ mix('/js/app.js') }}"></script>
やりたいこと
フォームに入力されている文字数をリアルタイムでカウントしたい。
問題
文字数は表示されるが、カウントがされない。
解決方法
app.blade.php
{{ asset('/js/app.js') }}にしていたところを
<script src="{{ mix('/js/app.js') }}"></script>
にしたら、動いた。
mixを使っているのに、assetを使ったからダメだったのかな。
よくわからない。
切り分けのために試したこと
index.html上では動く
vueで正常に動作することを確認
javascriptのコードでも普通に動く。
MAMPのせいではない
コードが間違っているわけではない。
Laravelのせいで動いていない。
Laravelでvueやjavascriptを動かすのになにかコツが必要っぽい。
textを表示させるコードなら動くから設置する場所などは間違ってないのではないか。
この記事が気に入ったらサポートをしてみませんか?