추가 데이터 로드 버튼

추가 데이터 로드 버튼

저는 현재 블로그를 구축하고 있고 로드 추가 버튼을 구현하려고 하지만 좀 막혔습니다.Vuex Store에서 호출한 REST API의 게시물 목록은 다음과 같습니다.

actions: {
   LOAD_ARTICLE_LIST: function ({ commit }) {
      axios.get('someurl/articles').then((response) => {
      commit('SET_ARTICLE_LIST', { list: response.data.data })
       }, (err) => {
       console.log(err)
       })
   }
}
mutations: {
  SET_ARTICLE_LIST: (state, {list}) => {
    state.articles = list
   }
}

단순화된 문서 구성요소:

<div v-for="article in articles">
  <div> {{ article.title }}</div>
  <div> {{ article.description }}</div>
  <div> {{ article.date }}</div>
</div>
<div v-if="articles.length > 4" @click="loadMore">
  <div>More articles</div>
 </div>

 computed: {
   articles() {
      function compare(a, b) {   //sort articles by date
        if (a.date > b.date)
          return -1;
        if (a.date < b.date)
          return 1;
        return 0;
      }

    let articleList = this.$store.state.articles.sort(compare);
    articleList.splice(0,5);
    return articleList
  }
 }

 mounted: function () {
   this.$store.dispatch('LOAD_ARTICLE_LIST')
 }

loadMore()를 호출하는 메소드를 사용해야 한다는 것을 알고 있으며, 그 안에 새로운 기사를 밀어넣어야 할 것 같은데 어떻게 해야 할지 모르겠습니다.만약 누군가가 나를 도와준다면, 정말 멋질 것 같아요!

읽어주셔서 감사합니다.

참고: 이 방법으로 기사를 누르면 모든 목록과 함께 날짜별로 정렬됩니까, 아니면 내가 누른 새 기사로만 정렬됩니까?

당신의 코드 스니프넷을 보고 당신이 하려고 하는 것에 근거합니다.사용해 보십시오.

    actions: {
      LOAD_ARTICLE_LIST: function ({ commit }) {
        axios.get('someurl/articles').then((response) => {
        commit('SET_ARTICLE_LIST', { list: response.data.data })
       }, (err) => {
       console.log(err)
       })
   }
}
mutations: {
  SET_ARTICLE_LIST: (state, {list}) => {
    function compare(a, b) {   //sort articles by date
      if (a.date > b.date)
        return -1;
      if (a.date < b.date)
        return 1;
      return 0;
     }
    state.articles = list.sort(compare);
   }
}

데이터 정렬이 정말 중요하다면 위에서 했던 것처럼 나머지 엔드포인트에서 데이터가 수신되면 그렇게 하는 것이 좋습니다.

아티클 구성 요소는 다음과 같아야 합니다.

<div v-for="article in articles">
  <div> {{ article.title }}</div>
  <div> {{ article.description }}</div>
  <div> {{ article.date }}</div>
</div>
<div v-if="articles.length > 5" @click="loadMore">
  <div>More articles</div>
 </div>

 computed: {
   articles() {
    let articleList = this.$store.state.articles;
    return articleList.splice(0, this.totalSize);
  }
 },

 data() {
    return {
      loadMoreSize: 5,
      totalSize: 0
    };
 },

 methods: {

   loadMore() {
     this.totalSize = this.loadMoreSize + this.articles.length;
   }

 },

 mounted: function () {
   this.loadMore();
   this.$store.dispatch('LOAD_ARTICLE_LIST')
 }

저도 시도해 본 적은 없지만 도움이 되었으면 합니다 :)

언급URL : https://stackoverflow.com/questions/53226913/build-a-load-more-data-button