为何使用Vue从后端获取数据后一直赋值失败？

Question

import axios from 'axios'
  import card from '../card/card.vue'
  export default {
    name: 'list',
    props: ['config'],
    components:{
      'card':card
    },
    data () {
      return {
        content:{}
      }
    },
    
    created () {
      var me = this;
      axios.get(me.config.url).then(function(res){
          var arr = res.data.data
          var obj = {}
          for(var ele in arr){
            arr[ele].forEach(function(x){
              if(obj[x.tid]){
                obj[x.tid].push(x)
              }else{
                obj[x.tid] = []
                obj[x.tid].push(x)
              }
            })
          }
          for(var ele in obj){
            if(obj[ele].length>4){
              me.content[ele] = obj[ele].splice(0,4);
            }
          }
         console.log(me.content)
      },function(res){
        console.log(res)
      })
    },
    mounted(){
       setInterval(function(){
        console.log(this.content)
      },1000)
      
    },

好吧，其实我想问的是为什么这个card组件不会重新渲染，然后我直接在外面把content展示下，发现他一直是个空对象，不会变的，难道他不会重新渲染吗？

Answer 1

因为你的content是一个空对象，vue只对data中定义的对象属性进行监听。

Answer 2

这里this指向变了 把定时器的回调写成箭头函数或者在外部像在前面一样用，me保存一下this

Answer 3

setInterval里面的this已经不是Vue的this了呀，上面created里你都已经知道要把this用一个me变量缓存了

1. 使用箭头函数保持this的指向:

mounted () {
    setInterval(() => {
        console.log(this.content)
    }, 1000);
}

1. 事先保存this

mounted () {
    var that = this;
    setInterval(function() {
        console.log(that.content)
    }, 1000);
}