函数之外的数据为空（Vue Js）[重复]

Question

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

如您所见，我将buffer 扔到this.codes = buffer 中的codes 中，但只是在success() 函数中工作

并且codes 在函数之外为空

我的代码尝试：

<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”