Laravel+Vue.jsでサイトを制作し、レンタルサーバ(ロリポップ)で公開しました。フォロー機能や、いいね機能など、ブラウザ側で処理を行う部分はコンポーネントとしてVue.jsを使用しています。
初めに公開した時は、全ての機能がきちんと動作しました。
その後、フォロー機能のデザインを変えようと思いVue.jsを修正したのですが、レンタルサーバで反映されません。(ローカルでは反映されました)
試しに画面表示部分や、phpの動作を変更すると、すぐに反映されました。
どなたか対処方法をご存知でしたら、教えていただきたいと思っております。回答よろしくお願いいたします。
開発環境
Laravel5.7
Mysql5.6
PHP 7.1
フォロー機能のソースコード
php
1 @if($post->user->id!=Auth::user()->id) 2 <follow 3 :follow-user="{{json_encode($post->user)}}" 4 :auth-user="{{json_encode($userAuth)}}" 5 :default-followed="{{json_encode($defaultFollowed)}}" 6 ></follow> 7 @endif
Vue
1<template> 2 <span style="margin-left:-10px;"> 3 <button v-if="!followed" type="button" class="btn btn-primary btn-sm " style="border-radius: 30px;" @click="postFollow()">フォローする</button> 4 <button v-else type="button" class="btn btn-primary btn-sm" style="border-radius: 30px;" @click="postUnFollow()">フォロー解除</button> 5 </span> 6</template> 7 8<script> 9 export default { 10 props: ['followUser', 'authUser', 'defaultFollowed'], 11 data() { 12 return { 13 followed: false 14 } 15 }, 16 created() { 17 this.followed = this.defaultFollowed 18 }, 19 methods: { 20 postFollow(){ 21 let url = `/api/users/${this.followUser.id}/follow` 22 23 axios.post(url,{ 24 authUser: this.authUser 25 }) 26 .then(res => { 27 this.followed = true 28 }) 29 .catch(err => {}) 30 }, 31 postUnFollow(){ 32 let url = `/api/users/${this.followUser.id}/unfollow` 33 34 axios.post(url,{ 35 authUser: this.authUser 36 }) 37 .then(res => { 38 this.followed = false 39 }) 40 .catch(err => {}) 41 } 42 } 43 } 44</script>
修正部分
<template> <span style="margin-left:-10px;"> <button v-if="!followed" type="button" class="btn btn-primary btn-sm " style="border-radius: 30px;" @click="postFollow()">フォローする</button> <button v-else type="button" class="btn btn-primary btn-sm" style="border-radius: 30px;" @click="postUnFollow()">フォロー解除</button> </span> </template>
ここのコードの、ボタンの場所、ボタンの色を変更しました。
webpack.mix.js
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
回答2件
あなたの回答
tips
プレビュー