.vue单文件里面data下面的变量不能渲染进<template></template>里面？？？

Question

通过AJAX获取的数据，赋值给data里面定义的变量movie，但是movie的值不能渲染进<template></template>里面。

点击事件之前：

点击事件之后：
可以看到，CSS生效了，变量list的值改变了并渲染进了HTML，但是movie的值就是渲染不进去？

模板部分（只列出了和问题相关的部分）：

<template>

<div class="row">
        <div class='showImg col-md-4'>
            {{list.title}}
            {{movie.title}}
            <!-- <img alt="loading" v-lzay=''/> -->
        </div>
        <button class="test1" @click='show()'>查询</button>
    </div>
</div>

</template>

JS部分：

<script>

export default {
    data() {
        return {
          list: {title:'生命周期测试'},
          movie: {},
          inputlist: '',
          inputname: '',
          example: '测试'
        }
    },

    methods: {
        show: function () {
          $.ajax({
                type: 'GET',
                url:'http://api.douban.com/v2/movie/top250',
                dataType: 'jsonp',
                success: function (data, textStatus) {
                    if (textStatus == 'success') {
                        this.movie = data.subjects[0];
                        console.log(this.movie);
                        console.log(typeof this.movie.title)
                    } else {
                        alert('发生错误:'+textStatus)
                    }
                }
            });
              $('.showImg').css({'border':'1px solid red','height':'20px'});
              this.list.title='改变';
        }
    }
}

</script>

Answer 1

经过自己试验结合楼上大家给的答案，终于解决了这个问题！
对this.movie = data.subjects[0]；这一句确实有问题，参考了vue的文档：https://cn.vuejs.org/v2/guide...，不能直接对data里面的属性赋值，而要采用文档里的方法。
但是还有一个重要的问题：
通过$.ajax方法时，原先的this已经改变了，此时this不是vue的实例，所以在执行$.ajax({})之前应该先var vm = this，然后对vm.movie执行操作，这样才能对data的movie属性赋值，并渲染到模板中。
谢谢大家~

Answer 2

这种ajax请求的格式里 success方法 用箭头函数就可以绑定this了
另外在对v-model绑定值的时候
最好使用
this.$nextTick({

})进行赋值
参考https://cn.vuejs.org/v2/api/#...

Answer 3

我搞错了 应该是 @有明 说的。

movie.title = 1才属于我下面解释的原因
movie = {title: 1}不会发生这种情况。

---

你这相当于给对象新增了一个属性，需要使用vue.$set，文档有说明。
因为vue初始化的时候对movie的title并没有做get set。
或者你在data里给movie写上title属性值为空，像list一样，让他初始就有title属性。

Answer 4

https://cn.vuejs.org/v2/api/i...

Answer 5

这属于vue的生命周期问题，只有第一次初始化时，定义好的变量，才会产生动态绑定。

另外对于一个object，用=对一个已经在data中定义过的变量赋值是不会有效果的。

除了用vue的set方法之外，从vue的源码中看到，可以这么做，实现对object的再次绑定：

this.movie = Object.assign({}, data.subjects[0]);

assign方法是es6中，拼接对象的方法。