vue2でv-forネストされたコンポーネントの親要素で要素が削除された後に更新されない

Question

私のアプリケーションでは、2つのVueコンポーネントを使用しています。 「日」のリストをレンダリングするものと、「日」ごとに「ロケーション」のリストをレンダリングするもの。たとえば、 "1日目"には "ベルリン"、 "ロンドン"、 "ニューヨーク"という場所があります。

すべてが表示されますが、日のリストから「1日目」を削除すると、表示が修正されません。これは何が起こるかです：

1. 置き換えられて削除された日のタイトル - >正しい
2. 置き換えられません削除された日のコンテンツ - >未正しい

Vue.component('day-list', { 
 
    props: ['days'], 
 
    template: '<div><div v-for="(day, index) in dayItems">{{ day.name }} <a href="#" @click.prevent="remove(index)">Remove day</a><location-list :locations="day.locations"></location-list><br/></div></div>', 
 
    data: function() { 
 
    return { 
 
     dayItems: this.days 
 
    } 
 
    }, 
 
    methods: { 
 
    remove(index) { 
 
     this.dayItems.splice(index, 1); 
 
    } 
 
    } 
 
}); 
 

 
Vue.component('location-list', { 
 
    props: ['locations', 'services'], 
 
    template: '<div><div v-for="(location, index) in locationItems">{{ location.name }} <a href="#" @click.prevent="remove(index)"</div></div>', 
 
    data: function() { 
 
    return { 
 
     locationItems: this.locations 
 
    } 
 
    }, 
 
    methods: { 
 
    remove(index) { 
 
     this.locationItems.splice(index, 1); 
 
    } 
 
    } 
 
}); 
 

 
const app = window.app = new Vue({ 
 
    el: '#app', 
 

 
    data: function() { 
 
    \t return { 
 
    \t days: [ 
 
     { 
 
      name: 'Day 1', 
 
      locations: [ 
 
      {name: 'Berlin'}, 
 
      {name: 'London'}, 
 
      {name: 'New York'} 
 
      ] 
 
     }, 
 
     { 
 
      name: 'Day 2', 
 
      locations: [ 
 
      {name: 'Moscow'}, 
 
      {name: 'Seul'}, 
 
      {name: 'Paris'} 
 
      ] 
 
     } 
 
     ] 
 
    } 
 
    }, 
 

 
    methods: {} 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 

 
<div id="app"> 
 
    <day-list :days="days"></day-list> 
 
</div>

Answer 1

あなたはすでにそれを使用していない場合Vue-devtoolsを使用してください。これは、下の画像に見られるように、問題を明らかに示している：あなたが上見ることができるように

は、あなたのday-listコンポーネントは、あなたが出て、直接記載されている場所で、元のリストを持っているすべての日で構成されます。その間にもう1つのコンポーネントが必要です。特定の日の情報を表示するday-detailsと呼んでください。 day-detailsの中にlocation-listがあるかもしれません。ここで

は動作します更新されたコードです：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 

<div id="app"> 
    <day-list :days="days"></day-list> 
</div> 

Vue.component('day-list', { 
    props: ['days'], 
    template: ` 
     <div> 
      <day-details :day="day" v-for="(day, index) in days"> 
       <a href="#" @click.prevent="remove(index)">Remove day</a> 
      </day-details> 
     </div>`, 
    methods: { 
     remove(index) { 
      this.days.splice(index, 1); 
     } 
    } 
}); 

Vue.component('day-details', { 
    props: ['day'], 
    template: ` 
     <div> 
      {{ day.name }} 
      <slot></slot> 
      <location-list :locations="day.locations"></location-list> 
      <br/> 
     </div>` 
}); 

Vue.component('location-list', { 
    props: ['locations', 'services'], 
    template: ` 
     <div> 
      <div v-for="(location, index) in locations"> 
       {{ location.name }} 
       <a href="#" @click.prevent="remove(index)">[x]</a> 
      </div> 
     </div> 
    `, 
    methods: { 
     remove(index) { 
      this.locations.splice(index, 1); 
     } 
    } 
}); 

const app = window.app = new Vue({ 
    el: '#app', 

    data: function() { 
     return { 
      days: [{ 
       name: 'Day 1', 
       locations: [{ 
        name: 'Berlin' 
       }, { 
        name: 'London' 
       }, { 
        name: 'New York' 
       }] 
      }, { 
       name: 'Day 2', 
       locations: [{ 
        name: 'Moscow' 
       }, { 
        name: 'Seul' 
       }, { 
        name: 'Paris' 
       }] 
      }] 
     } 
    }, 

    methods: {} 
}); 

もうひとつ - テンプレートlocation-listためには、エラーが発生しました - あなたは<a>要素を閉じていません。上記の例のように、バックライン演算子を使用して複数行のテンプレートを作成し、テンプレートのエラーを回避することができます。

また、propsで渡されたオブジェクトを変更することはできません。これは、参照渡しされたオブジェクトを渡すため、ここで動作します。しかし、文字列オブジェクトは、このエラーになります子コンポーネントに変更行き方：ここDelete a Vue child component