<template>
  <div id="app">
    <p v-for="item in items" :key="item.id" class="p" >
      {{item.message}}
      <span v-for="item2 in item.child" :key="item2.id" style="display: block">{{item2.message}}</span>
    </p>
    <button class="btn" @click="handClick()">
      更改資料
    </button>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        items: [
          { message: "one", id: "1" ,
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          },
          { message: "two", id: "2",
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          },
          { message: "three", id: "3",
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          }
        ],
        testMsg:"原始值",
      }
    },

    created() {
      // this.items[0] = { message:'first22',id:'4'} //此時物件的值更改了，檢視有更新
    },
    mounted () {
      // this.items[0] = { message:'first',id:'4'} //此時物件的值更改了，但是檢視沒有更新
      // console.log(this.items[0])//此時0裡面是id: "4"，message: "first"，檢視沒有更新

      // 因為陣列和物件更新後不會更新檢視，這裡必須用$set方法
      let obj = {message:'first新',id:"4"}
      this.$set(this.items,0,obj) //$set 可以觸發更新檢視
      console.log(this.items[0])
    },
/*    mounted(){
      this.items.map((item, index, array) => {
        console.log(item)
    //     更改物件
    //        item = { message:'first',id:'4'}  //這樣整個物件或陣列不會更新檢視，只是item.message才會更新
    //
    //     新增物件下的child
        let child = [
          { message: "one22", id: "1" },
          { message: "two22", id: "2" },
          { message: "three22", id: "3" }
        ]
    //     因為陣列和物件更新後不會更新檢視，這裡必須用$set方法
        this.$set(array[index], 'child', child)
    //    開啟data裡的child註釋，更改物件下的child
        // this.$set(array[index], 'child',[
        //   { message: "one222", id: "1" },
        //   { message: "two222", id: "2" },
        //   { message: "three222", id: "3" }
        // ])
      })
      console.log(this.items)
    },*/
    methods: {
      handClick(){
        let changeObj = this.items[0]
        changeObj.message="修改後的first"
        this.$set(this.items,0,changeObj)
        console.log(this.items[0])

        // this.items[0].message = '修改後的資料'
        // this.$nextTick(() => {
        //   let domTxt=document.getElementsByClassName('p')[0].innerText;
        //   console.log(domTxt);
        //   console.log(this.items[0])
        // });

      },

    }
  }
</script>