Vue动态添加data属性视图层不更新解决

有些场景需要动态添加数据属性

• html代码

<div id="app">
        <ul>
            <li v-for="( item , key , index ) in data " :key="key" v-bind:class="{'active' : item.flag}">
                <span v-on:[event]="handleClick(key)">{{item.text}} , {{item.flag}}</span>
            </li>
        </ul>
    </div>

• css

        .active {
            background: red;
            color: pink
        }

• Vue

    Vue.component('todo-item', {
        template: '#temp',
    })

    const app = new Vue({
        el: '#app',
        data: {
            data: {
                d1: {
                    text: '数据1',
                },
                d2: {
                    text: '数据2'
                },
            },
            event: 'click'
        },
        created() {
        },
        methods: {
            handleClick(index) {
                Object.keys(this.data).forEach((key) => {
                    this.$set(this.data[key], 'flag' , false); // Vue.$set(要被新增的对象 ，'属性名' , 属性值 );
                    // this.data[key].flag = false;
                }),
                    this.data[index].flag = true;
                    console.log('click', this.data);
    }
        },
        watch: {
        }
     })

PS : 通过正常的点语法等方法添加的属性无法让Vue监视到新增属性 ，导致数据层数据改变 ， 视图层get不到数据 ，通过使用Vue提供的$set方法来添加新的属性