Question

我有一个包含默认对象的组件，并在创建GET时填充了一个对象。当尝试将this.profile绑定到新对象时，它似乎在方法中获得了正确的数据，但更改并未推回到this.profile的其他用途。有没有办法强制这个更改被脚本的其余部分选中？

export default {
data() {
    return {
        profile: {
            firstName: 'Seller First Name',
            surname: 'Seller Surname',
            username: '',
            biography: 'Seller biography.',
            phoneNumber: 'Seller Phone Number',
            emailAddress: 'Seller Email',
            profilePhotoUrl: '',
            testimonials: []
        }
    };
},

components: {
    ProfileSummary,
    Biography,
    TestimonialList,
    PaymentsenseCompany
},

created() {
    console.log('created');
    this.getProfile(this.$route.params.sellerUsername);
},

methods: {
    getProfile(sellerUsername) {
        axios.get('http://fieldsellerprofileapi.azurewebsites.net/api/fieldseller/' + sellerUsername)
        .then(function(response) {
            this.profile = Object.assign({}, response.data);
            Vue.nextTick(() => {
                console.log('after', this);
            });
        }.bind(this))
        .catch(e => {
            console.log(e);
            // location.replace('/404');
        });
    }
},

Answer 1

我不确定，但试试这个：

getProfile(sellerUsername) {
  axios
    .get('http://fieldsellerprofileapi.azurewebsites.net/api/fieldseller/' + sellerUsername)
    .then(r => this.profile = r.data)
    .catch(e => console.log(e))
}

Answer 2

事实证明，问题不在于价值没有得到更新。他们被保存得很好，我只是试图在一个子组件中访问它们，这个子组件由于某种原因没有与父组件一起更新。这些变化并没有传播给孩子们......如果你有同样的问题，这可能是有用的研究。

由于

GET后Vue.js组件数据未更新

2 个答案: