更新時に子コンポーネントのデータが次の兄弟コンポーネントに渡されます

Question

2つのコンポーネント（RequestListとRequest）があります。親コンポーネントは、getRequestList()メソッドを呼び出して、サーバーから子コンポーネントにフェッチされたオブジェクトの配列を小道具としてリストします。

子コンポーネントから、親コンポーネントのメソッドdeleteRequest(request_id)を呼び出してオブジェクトを削除することができます。これは、小道具として送信されました。 親コンポーネントメソッドでは、削除要求をサーバーに送信してオブジェクトを削除します。成功した場合は、同じメソッドを呼び出してリクエストのリストを取得しますgetRequestList()。

私が直面している問題は、子コンポーネントでは、別の方法でリクエストを投票することですVoteRequest()。投票が成功した場合、Requestコンポーネントの投票ステータスが更新されます。失敗した場合は、エラーが表示されます。

ここで、リクエストコンポーネント（子）の1つ、たとえば最初のリクエストオブジェクトにすでにエラーがあるとします。そのリクエストを削除すると、リクエストリストが更新されます。何らかの理由で私は理由を知らないが、削除されたコンポーネントのエラーは次のリクエストコンポーネントにまだ残っている。私はここで間違って何をしていますか？

親コンポーネント（RequestList.vue）：

template 
     <ul id="request_list" v-if="request_list_data.length > 0"> 
      <li v-for="request in request_list_data"> 
       <request :request_id="request.id" 
         :deleteRequest="deleteRequest" 
         :updateVotes="updateRequestVotes"> 
       </request> 
      </li> 
      <p class="error" style="margin-top: 20px;" v-show="request_error !== ''">{{request_error}}</p> 
     </ul> 

script 
    export default { 
     data: function() { 
      return { 
       request_list_data: [], 
      } 
     }, 
     methods: { 
      getRequestList() { 
       const url = this.$store.state.website + '/api/activities/-requests/?ordering=-id'; 
       this.$http.get(url) 
        .then(function (response) { 
         this.request_list_data = Object.assign([], response.data); 
        }) 
      }, 
      deleteRequest(request_id){ 
       const url = this.$store.state.website + '/api/activities/-requests/' + request_id + '/'; 
       this.$http.delete(url) 
        .then(function (response) { 
         this.getRequestList(); 
        }) 
      } 
     }, 
     created: function() { 
      this.getRequestList(); 
     } 
    } 

子コンポーネント（Request.vue）：

template 
     <div class="request"> 
      <div class="vote-action" @click="VoteRequest('down')">&#x25BC;</div> 
      </div> 
      <div class="_data"> 
       <div class="request_error" v-show="vote_error !== ''"> 
        <p class="error">{{vote_error}}</p> 
       </div> 
       <button v-show="selfrequest" class="deleterequest_btn" @click="deleterequest()">Delete your request</button> 
      </div> 
     </div> 

script 
    export default { 
     name: 'request_wrapper', 
     props: { 
      request_id: { 
       type: Number, 
      }, 
      updateVotes: { 
       type: Function 
      }, 
      deleteRequest: { 
       type: Function 
      } 
     }, 
     data: function() { 
      return { 
       vote_error: '' 
      } 
     }, 
     methods: { 
      VoteRequest(vote_type) { 
       this.vote_error = ''; 
       if (this.$store.state.user_logged_in) { 
        if (vote_type === 'up') { 
         const data = { 
          'request': this.request_id, 
          'vote_type': true 
         }; 
         this.PostVote(data); 
        } 
        else if (vote_type === 'down') { 
         const data = { 
          'request': this.request_id, 
          'vote_type': false 
         }; 
         this.PostVote(data); 
        } 
      }, 
      PostVote(data) { 
       const url = this.$store.state.website + '/api/activities/-request-votes/none/voterequest/'; 
       this.$http.post(url, data) 
        .then(function (response) { 
         console.log(response.data); 
         this.updateVotes(this.request_id, response.data.votes); 
        }) 
      }, 
      deleterequest() { 
       this.deleteRequest(this.request_id); 
      } 
     } 
    } 

Answer 1

これは、常にv-forループ内の要素にユニークなkeyを追加することをお勧めします。

keyを使用すると、v-forでレンダリングされた配列からアイテムを削除すると、奇妙な動作を回避できます。それは、Vueのは、新しいデータをレンダリングするか、キャッシュされたものを表示するようにweither決めるのに役立ちます：https://vuejs.org/v2/guide/list.html#key

keyを使用してのVue 2.2から始めては、ループのコンポーネントが必要です： `request_error`はhttps://vuejs.org/v2/guide/list.html#Components-and-v-for