Vue 删除组件列表时，data 并没有重新计算

Question

代码如下：<div id="content">    <p v-for="item in lists">        <item :id="item.id" :name="item.name" :price="item.price"></item>    </p></div><script type="text/javascript">    Vue.component('item', {        template: '<span>{{ id }}|{{ price }}|{{ sale }}</span>',        props: ['id', 'price'],        data: function (){            return {                'sale': this.price * 0.8            }        }    })    var app = new Vue({        el: '#content',        data: {            lists: [                {'id': 0, 'price': 100},                {'id': 1, 'price': 200},                {'id': 2, 'price': 300},                {'id': 3, 'price': 400},                {'id': 4, 'price': 500},                {'id': 5, 'price': 600}            ]        }    })</script>是一个简单的组件列表，执行效果：在 console 里执行：Vue.delete(app.$data.lists, 1)效果如下：可以看到 lists 已经删除了 ID 为 1 的元素，ID 和 price 列都没正常，但是 sale 列删除的是最后一个元素。请问大神帮忙看下应该怎么写才能避免这个问题，非常感谢~

Answer 1

应该用计算属性

        Vue.component('item', {

        template: '<span>{{ id }}|{{ price }}|{{ sale }}</span>',

        props: ['id','price'],

        data: function (){

            return{

            }

        },

        computed:{

            sale:function(){

               return this.price * 0.8;

            }

        }

    })

删除

this.lists.splice(1,1);