如何从.then()内部设置组件的属性

时间:2018-12-20 14:30:50

标签: javascript vuejs2 fetch vue-component

我正在执行fetch()请求,然后执行then()函数。我想从then()函数内部设置组件的属性。参见下面的代码this.h_editBut = true;。它不更新组件的h_editBut属性。该怎么做?

Vue.component('users-row', {
    props: ['row'],
    data: function() {
        return {
            h_editBut: false,
            fName: '',
            lName: '',
            userDetails: ''

        }
    },
    template: ` <li>
                    <div>{{row.id}}</div>
                    <div>{{row.fname}}</div>
                    <div>{{row.lname}}</div>
                    <div><button @click="fName=row.fname; lName=row.lname; editRow();" v-bind:class="{ishidden:h_editBut}">Edit</button></div>
                    <div v-if="h_editBut">
                        <input v-model="userDetails">
                    </div>
                </li>`,
    methods: {
        editRow: function() {


            fetch("http://localhost/pr2/web_service/users/details?fname=" + this.fName + "&lname=" + this.lName).then(function(response) {
                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ' +
                        response.status);
                    return;
                }

                return response.json();


            }).then(function(result) {

                this.h_editBut = true;


            }).catch(function(err) {
                console.log('Fetch Error :-S', err);
            });

        }
    }

});

0 个答案:

没有答案