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

问题描述

问 题

通过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>

解决方案

经过自己试验结合楼上大家给的答案，终于解决了这个问题！
对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属性赋值，并渲染到模板中。
谢谢大家~

这篇关于前端 - .vue单文件里面data下面的变量不能渲染进&lt;template&gt;&lt;/template&gt;里面？？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！