Vue.set( target, key, value )

 <!-- 
        Vue.set( target, key, value )
        向響應式的對象中添加屬性
        vue 實例data中的對象，直接添加屬性，this.obj.property = '' ，雖然對象上添加了該屬性，可是view上不會顯示改變
        this.$set(obj, property ,value) 能夠達到想要的效果（這裏的this指的是vue實例

     -->
    <div id="app">
        <ul>
            <li v-for="(pro , key ,index) in superman">
                {{pro}} --- {{key}} --- {{index}}
            </li>
        </ul>
        <button @click="addpro">添加屬性</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                superman: {
                    name: 'sm',
                    age: 98,
                    sex: 'male'
                }
            },
            methods: {
                addpro: function(){
                    this.superman.city = 'beijing' //頁面上不會顯示 city --- beijing --- 3

                    // this.$set(this.superman, 'city', 'beijing') //使用$set(）方法

                    console.log(this.superman);
                    
                }
            }

        })
    </script>