javascript - How to update data on a page without refreshing on the vue.js?

Question

My view is like this :

<div class="favorite" style="margin-bottom:5px;"> 
    @if (Auth::user())
        <add-favorite-store :id-store="{{ $store->id }}"></add-favorite-store>
    @else   
        <a href="javascript:" class="btn btn-block btn-success">
            <span class="fa fa-heart"></span>&nbsp;Favorite
        </a>
    @endif
</div>

My component is like this :

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)">
        <span class="fa fa-heart"></span>&nbsp;<label id="favoriteId">{{ store_id == 'responseFound' ? 'Un-Favorite' : 'Favorite' }}</label>
    </a>
</template>

    <script>
        export default{
            props:['idStore'],
            mounted(){
                this.checkFavoriteStore()
            }, 
            methods:{
                addFavoriteStore(event){

                    var label = $('#favoriteId')
                    var text = label.text()

                    event.target.disabled = true
                    const payload= {id_store: this.idStore}

                    if(text == "Favorite") {
                        this.$store.dispatch('addFavoriteStore', payload)
                    }
                    else {
                        this.$store.dispatch('deleteFavoriteStore', payload)
                    }

                    setTimeout(function () {
                        location.reload(true)
                    }, 1500)
                },
                checkFavoriteStore(){
                    const payload= {id_store: this.idStore}
                    var data = this.$store.dispatch('checkFavoriteStore', payload)
                    data.then((res) => this.store_id = res)
                }
            },
            data() {
                return {
                    store_id: ''
                }
            }
        }
    </script>

On the my code above, I using

location.reload(true)

to update data on the page. But it's reload the page.

I want when update the page, it's not reload the page

How can I do it?

Answer 1

Ok Here is a simple use case but less complicated as yours and using vuejs as it should be used. (http://codepen.io/simondavies/pen/MJOQEW)

OK let laravel/php code get the store ID as well as if its already been favorited. This way your script is not first checking the store to then decide what to do.

What this does is sends the store-id and the is-favorited through the component like:

 <favorite :store-id="{{$store->id}}" :is-favorited="{{$store->isFavorited}}"></favorite>

Then the Vue component will update the button to display if its already liked (red) or not (grey), and then also handle the click event and update accordingly as well.

As you are using Laravel to tell the component if it's already favorited you can get rid of your checking function and one less http request. Then you only need to then update the store when the user clicks the favourite button.

And as seen in the demo it updates, no need to refresh.

I hope this help you re-write yours so you get waht you want.

PS i have left out the Logged IN check @if (Auth::user()) you have so you can put that back in etc

Vue.component('favorite', {
  template: '<button type="button" @click.prevent="updateFaviteOption" :class="{ 'is-favorited': isFavorited }"><span class="fa fa-heart"></span></button>',
  props: [
    'storeId',
    'isFavorited'
  ],
  data: function() {
    return {}
  },
  methods: {
    updateFaviteOption: function() {
      this.isFavorited = !this.isFavorited;
      ///-- DO YOU AJAX HERE i use axios
      ///-- so you can updte the store the the this.isFavorited
    }
  }

});

new Vue({
  el: '#app',
});

.favorite-wrapper {
  margin: 20px auto;
  padding: 0;
  text-align: center;
  width: 500px;
  height: 100px;
}
a:link,
a:active,
a:visited {
  text-decoration: none;
  text-transform: uppercase;
  color: #444;
  transition: color 800ms;
  font-size: 18px;
}
a:hover,
a:hover:visited {
  color: purple;
}
button {
  margin: 10px auto;
  padding: 8px 10px;
  background: transparent;
  width: auto;
  color: white;
  text-transform: uppercase;
  transition: color 800ms;
  border-radius: 4px;
  border: none;
  outline: none;
}
button:hover {
  cursor: pointer;
  color: #058A29;
}
.fa {
  color: #d9d9d9;
  font-size: 20px;
  transition: color 400ms, transform 400ms;
  opacity: 1;
}
.is-favorited .fa {
  opacity: 1;
  color: red;
  transform: scale(1.4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<div id="app">

  <div class="favorite-wrapper">
    <favorite :store-id="3" :is-favorited="true">
    </favorite>
  </div>

</div>