vue.js에서 새로 고치지 않고 페이지에서 데이터를 업데이트하는 방법

vue.js에서 새로 고치지 않고 페이지에서 데이터를 업데이트하는 방법

제 견해는 이렇습니다.

<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>

내 컴포넌트는 다음과 같습니다.

<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>

위의 내 코드에서

location.syslog(true)

페이지상의 데이터를 갱신합니다.하지만 페이지를 다시 로드합니다.

페이지를 갱신할 때 페이지를 새로고침하지 않고 싶다.

어떻게 해야 하죠?

OK 여기 간단한 사용 사례가 있습니다.또, 사용하는 대로 vuej를 사용하는 것도, 고객님의 경우와 마찬가지로 복잡하지 않습니다.(http://codepen.io/simondavies/pen/MJOQEW)

네, laravel/php 코드가 스토어 ID를 가져오고 이미 선호되고 있는 경우.이렇게 하면 스크립트는 먼저 스토어를 체크한 후 어떻게 할지 결정하는 것이 아닙니다.

하면 '부터', '아까부터', '아까부터'를 수 있습니다.store-id 및is-favorited하다

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

그런 다음 Vue 컴포넌트는 버튼을 업데이트하여 이미 마음에 들었는지(빨간색) 여부를 표시하고 클릭 이벤트를 처리하고 그에 따라 업데이트합니다.

Larabel을 사용하여 컴포넌트에 통지하고 있기 때문에 체크 기능을 삭제하고 http 요청을 1개 줄일 수 있습니다.그런 다음 사용자가 즐겨찾기 버튼을 클릭했을 때만 스토어를 업데이트하면 됩니다.

데모에서 보듯이 업데이트되므로 새로 고칠 필요가 없습니다.

이게 네가 원하는 걸 다시 쓰는 데 도움이 됐으면 좋겠어.

되었습니다.@if (Auth::user()) 넣을 수 ...

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>

vue-router 문서에서 설명하는 다른 솔루션.를 사용하면 됩니다.watch $route할 수 동일한 컴포넌트를 사용하여 데이터를 가져오는 경우에도 새로운 루트를 검출할 수 있습니다.

필요한 것은 vm-forceUpdate입니다.

Vue 인스턴스를 강제로 다시 렌더링합니다.모든 하위 구성 요소에는 영향을 주지 않으며 인스턴스 자체 및 슬롯 내용이 삽입된 하위 구성 요소에만 영향을 미칩니다.

제가 직접 써본 적은 없고, 프로젝트를 하다가 우연히 발견했어요.

vue forceUpdate 또는 vue forceUpdate의 함수를 호출할 수 있습니다.setTimeout★★★★★★ 。

setTimeout(function () {
    this.checkFavoriteStore();
}, 1500)

당신은 여기서 javascript를 많이 사용하고 있습니다.vue를 사용하여 대부분의 작업을 할 수 있습니다.

이 질문에는 가능한 한 잘 대답하기 위해 여기에 언급되지 않은 것이 많습니다.해당 html, 갱신해야 할 것, 갱신해야 할 것 등이 필요합니다.

Vuejs가 어떻게 기능하는지, 그리고 이와 같은 간단한 작업을 수행하는 방법에 대한 자세한 내용은 이 https://laracasts.com/series/learn-vue-2-step-by-step을 참조하십시오.

상세한 스토어/vuex 타입의 코딩을 사용하고 있기 때문에, 기본을 이해하지 못하면, 해답을 찾는 것이 어려워질 수 있습니다.

좀 허튼소리 해서 미안한데.

언급URL : https://stackoverflow.com/questions/41904428/how-to-update-data-on-a-page-without-refreshing-on-the-vue-js