vue 里报错 Uncaught TypeError: Cannot read property 'style' of null

让心学会去思考 2019-04-03 11:21:10

<body>
<div id="img" >
<img id="zp111" src="img/bg01n.png" >
</div>
</body>

<script type="text/javascript">

new Vue({
el: '#img',
data: {
sites: []
},
created: function () {
　　　　　　//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
var self = this;
var shuzi = document.getElementById("shuzi")
var zp111 =document.getElementById("zp111")

$.ajax({
url: "https://www.tianqiapi.com/api/",
type: 'get',
data: 'version=v1&city=恩施',
dataType: 'json'
}).then(function (res) {
console.log(res);
// 　　　　　　　　　console.log(res.data[0].wea);
if(res.data[0].wea == "小雨")
{
document.getElementById("zp111").style.backgroundImage="url(img/bg03d.png)"
}
self.sites = res;
}).fail(function () {
console.log('失败');
})
},

})
</script>

...全文

1581 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

讨厌走开啦 2019-04-03

打赏
举报

created阶段dom还没有创建成功。

cnstay 2019-04-03

打赏
举报

66636696

scscms太阳光 2019-04-03

打赏
举报

楼主的代码没有错误。而且created阶段dom已经生成的。

不过建议改掉手动操作dom行为，否则用vue还有什么意义：

<div id="img">

    <img id="zp111" :src="src" >

</div>

<script type="text/javascript">

    new Vue({

        el: '#img',

        data: {

            src: 'img/bg01n.png',

            sites: []

        },

        created: function () {

            var self = this;

            $.ajax({

                url: "https://www.tianqiapi.com/api/",

                type: 'get',

                data: 'version=v1&city=恩施',

                dataType: 'json'

            }).then(function (res) {

                if(res.data[0].wea === "小雨"){

                    self.src = "img/bg03d.png"

                }

                self.sites = res;

            }).fail(function () {

                console.log('失败');

            })

        },

    })

</script>