vue.js - 为什么vue的data数据变了html中用{{}}绑定的数据不会变呢？

问题描述

问 题

为什么vue的data数据变了html中用{{}}绑定的数据不会变呢？

code：

var vm=new Vue({
    el: '#companynew',
    data: { items: [] }
});
$.ajax({
    type: 'get',
    url: '/api/companynew/getPageingData',
    dataType: 'json',
    data: { pageindex: pagedex },
    success: function (data) {
        //alert(data);
        for (var i = 0, len = 4 - data.length; i < len; i++) {
            data.push(nulldata);
        }
        vm.$set("items") = data;
        //new Vue({
        //    el: '#companynew',
        //    data: { items: data }
        //});
        alert(vm.$data.items[0].title);
    },
    error: function () {
        $("#alertDilog").click();
        $("#myModal .modal-body").text("系统错误，请联系管理员！");
    }
});

html:

<div id="companynew" v-for="item in items" style="position: relative; left: 50%; margin-left: -560px;">
        <div v-if="($index==0)" style="width: 610px; float: left;">
            <img src="{{item.img}}" />
            <div style="padding: 1em 0px;">
                <div style="font-weight: 600; font-size: 13pt; text-overflow: ellipsis; overflow: hidden;">
                    {{item.title}}
                </div>
                <div id="container" class="mCustomScrollbar" data-mcs-theme="dark" style="height: 73px; white-space: initial; overflow-x: hidden; color: rgb(176, 176, 176);">
                    {{item.content}}<br />
                    <span style="float: right;">{{item.Publisher}} {{item.date}}</span>
                </div>
            </div>
        </div>
        <div v-else style="overflow: hidden; width: 500px; padding-left: 3em;">
            <div style="overflow: hidden; margin-bottom: 3em;">
                <div style='float:left; width: 100px; font-family: "新宋体"; height: 100px; text-align: center; background-color: rgb(255, 104, 103); color: white; padding: 1em 0px;'>
                    <span style="font-size: 40pt; line-height: 1;">{{item.date | substring 8 10}}</span>
                    <span style="font-size: 13pt;">{{item.date | substring 0 7}}</span>
                </div>
                <div style="white-space: nowrap; overflow: hidden; padding-left: 1em;">
                    <div style="font-weight: 600; font-size: 13pt; text-overflow: ellipsis; overflow: hidden;">
                        {{item.title}}
                    </div>
                    <div id="container" class="mCustomScrollbar" data-mcs-theme="dark" style="height: 73px; white-space: initial; overflow-x: hidden; color: rgb(176, 176, 176);">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>

解决方案

要么给success绑定this，如：

success: function (data) {
    // ...
}.bind(this);

要么用箭头函数，如：

success: (data) => {
    // ...
}

要么就自己保存this，如：

const _this = this;

// ....

这篇关于vue.js - 为什么vue的data数据变了html中用{{}}绑定的数据不会变呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！