javascript - 函数外部数据为 null (Vue Js)

Question

这个问题已经有答案了:

How to update data of a VueJS instance from a jQuery AJAX call? (3 个回答)

已关闭 3 年前。

我正在尝试使用 vuejs 和 ajax 创建 API

如你所见，我抛出了 buffer里面codes通过this.codes = buffer但只是在 success() 内工作功能

和codes在函数之外为 null

我的代码尝试:

<div id="app">
    <a v-on:click.prevent="GetId($event)" value="1">click me!</a>
    @{{ codes }}
</div>

<script type="text/javascript" language="JavaScript">

    new Vue({
        el: '#app',
        data: {
                codes:null
        },
        methods:{
            GetId:function (event) {
                element = event.currentTarget;
                value = element.getAttribute('value');
                    $.ajax({
                        type : 'GET',
                        url : 'api/GetProduct/'+value,
                        async : false,
                        beforeSend : function(){},
                        dataType : 'json',
                        success : function(result){
                                    var buffer="";
                                    for(let i=0 ;i < Object.keys(result).length;i++) {
                                        buffer += "<div class='category-item'><a class='button-product-info-s' href='/product/"+result[i]['id']+"'/><img class='product-img-s' src='"+result[i]['pic_url'] +"'></a><p class='product-name-s'>"+result[i]['name']+"</p><a class='btns btn-primarys btn-buy-s' href='/product/"+result[i]['id']+"'></div>";
                                    }
                                    console.log(buffer);
                                    this.codes= buffer;
                        }
                    });
            }}});
</script>
</body>
</html>

Answer 1

尝试将成功函数更改为箭头函数，因此:

success : function(result){ ... }

至:

success :  result => { ... }

原因是非箭头函数改变了“this”