Javascript Vue.js更新数组，不重新加载所有数据

我是Vue.js和JavaScript的新手。我只想知道如何更新数组（在添加/编辑/删除时），而不是重新加载所有数据。仅在打开带有地址的页面时加载所有数据

这是我的代码：

<template v-else>
<div>
    <div class="page-header with-actions">
        <h1>Addresses</h1>
        <div class="actions">
            <b-btn @click="addAddress" variant="primary"><i class="oi oi-plus"></i> Add Address</b-btn>
        </div>
    </div>
    <div v-if="isLoaded === true">
        <div v-if="addressList.length">
            <b-form @submit.prevent="submit">
                <validation-summary :errors="errors"></validation-summary>

                <div class="row">
                    <div class="col-sm-4" v-for="address in addressList">
                        <div class="card bg-light mb-4">
                            <div class="card-header">
                                {{address.countryName}}
                                <div class="float-right">
                                    <b-btn @click="editAddress(address.id)" class="btn btn-default btn-sm" data-toggle="tooltip" title="Edit address">
                                        <i class="fa fa-edit" aria-hidden="true"></i>
                                    </b-btn>
                                    <b-btn @click="deleteAddress(address.id)" class="btn btn-default btn-sm" data-toggle="tooltip" title="Delete address">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </b-btn>
                                </div>
                            </div>
                            <div class="card-body">
                                <em class="card-text">{{address.city}},</em><br />
                                <em class="card-text">{{address.streetAddress}},</em><br />
                                <em class="card-text">{{address.zip}}</em><br />
                            </div>
                        </div>
                    </div>
                </div>
            </b-form>
        </div>
        <div v-else class="alert alert-info" role="alert">
            There are no <strong>addresses</strong> yet!
        </div>
    </div>
    <add-address-modal ref="addAddressModal" @success="addressAdded"></add-address-modal>
    <edit-address-modal ref="editAddressModal" @success="addressEdited></edit-address-modal>
</div>
</template>

<script>
import Vue from 'vue';
import modalFormMixin from 'mixins/modal-form-mixin';
import formMixin from 'mixins/form-mixin';
import accountService from 'services/account-service';

import AddAddressModal from './add-address-modal';
import EditAddressModal from './edit-address-modal';

export default {
    mixins: [modalFormMixin],
    mixins: [formMixin],

    components: {
        'add-address-modal': AddAddressModal,
        'edit-address-modal': EditAddressModal
    },

    data() {
        return {
            addressList: [],
            isLoaded: false,
        }
    },

    async beforeRouteEnter(to, from, next) {
        next(async (c) => await c.initData());
    },

    methods: {
        async initData() {
            await this.loadAddressList(); //when opening page

            this.isLoaded = true;
        },

        async loadAddressList() {
            this.addressList = await accountService.getAddressList();
        },

        addAddress(data) {
            this.$refs.addAddressModal.show();
        },

        editAddress(id) {
            this.$refs.editAddressModal.show(id);
        },

        async deleteAddress(id) {
            await accountService.deleteAddress(id);

            this.loadAddressList(); //need to change

            this.$root.successToast('Address deleted');
        },

        addressAdded() {
            this.loadAddressList(); //need to change

            this.$root.successToast('Address added');
        },

        addressEdited() {
            this.loadAddressList(); //need to change

            this.$root.successToast('Address edited');
        }
    }
}
</script>

地址
添加地址
{{address.countryName}
{{地址.城市}，

{{address.streetAddress}，

{{address.zip}}

还没有地址！
我以前在这个问题上犯过错误。这与变化如何延迟有关

您的问题的示例解决方案

方法：{
异步加载地址列表（）{
this.addressList=等待accountService.getAddressList（）；
等待此操作。$nextTick（）//在完成函数之前等待下一个事件。
},
}

看一看

此外，还可以研究一下如何替换数组，以执行一些有效的操作工作来重用DOM元素

祝你好运。
我以前在这个问题上遇到过麻烦。这与变化如何延迟有关

您的问题的示例解决方案

方法：{
异步加载地址列表（）{
this.addressList=等待accountService.getAddressList（）；
等待此操作。$nextTick（）//在完成函数之前等待下一个事件。
},
}

看一看

此外，还可以研究一下如何替换数组，以执行一些有效的操作工作来重用DOM元素

祝你好运。
我想知道你是否可以利用
，然后
？例如，在您的
initiData
方法中，您可以这样做吗

async initData() {
    this.loadAddressList()
        .then(() => {
             this.isLoaded = true;
        });
    },

这意味着您不需要更新loadAddressList方法并让它等待，也不需要执行它真正不应该负责的其他功能

更新：您还应该确保
loadAddressList
方法返回一些值，因为它使用
async
关键字返回承诺

async loadAddressList() {
    this.addressList = await accountService.getAddressList();
    return true
},

然后
.Then（）
将在
initData（）方法中工作

另请参见中的屏幕截图

我想知道你是否可以利用
那么
？例如，在您的
initiData
方法中，您可以这样做吗

async initData() {
    this.loadAddressList()
        .then(() => {
             this.isLoaded = true;
        });
    },

这意味着您不需要更新loadAddressList方法并让它等待，也不需要执行它真正不应该负责的其他功能

更新：您还应该确保
loadAddressList
方法返回一些值，因为它使用
async
关键字返回承诺

async loadAddressList() {
    this.addressList = await accountService.getAddressList();
    return true
},

然后
.Then（）
将在
initData（）方法中工作

另请参见中的屏幕截图

使用vue 2.0，确保每次数据更改触发dom更新的最佳选择是使用关联数组（对象的对象）设置vue.set，但为了更高效，更新/创建请求应返回对象，然后可以将其推送到数组中或使用此方法：

import Vue from 'vue'
createAddress(data) {
   axios.POST('your-url', data).then( address => {
       Vue.set($store.addresses, address.id, address)
   })
}

要使用它，您必须更改以下关联的地址数组：

import Vue from 'vue'

getAddresses(state) {
   axios.GET('your-url').then(addresses => {
       addresses.forEach(address => {
            Vue.set(state.addresses, address.id, address)
       })
   })
}

你也可以这样做

Object.assign（state.addresses[address.id]，address）

但根据我的经验，这有时由于未知的原因而不会更新dom

然后，您的地址列表必须是指向您的状态管理（vuex或其他）中的地址的计算值

使用vue 2.0，确保每次数据更改触发dom更新的最佳方法是使用关联数组（对象的对象）设置vue.set，但为了更高效，更新/创建请求应返回对象，然后可以将其推入数组或使用以下方法：

import Vue from 'vue'
createAddress(data) {
   axios.POST('your-url', data).then( address => {
       Vue.set($store.addresses, address.id, address)
   })
}

要使用它，您必须更改以下关联的地址数组：

import Vue from 'vue'

getAddresses(state) {
   axios.GET('your-url').then(addresses => {
       addresses.forEach(address => {
            Vue.set(state.addresses, address.id, address)
       })
   })
}

你也可以这样做

Object.assign（state.addresses[address.id]，address）

但根据我的经验，这有时由于未知的原因而不会更新dom

然后，您的地址列表必须是指向您的状态管理（vuex或其他）中的地址的计算值

更直接的方法不是在编辑时将地址保存到帐户服务吗？这样，您就可以始终加载更新的列表。@Imre\u G我只需要更新添加/编辑或删除的地址，而不是每次都加载所有列表…您可以将代码发布到AddAddressModal和EditAddressModal组件吗？@Imre\u G我认为这没有必要，这只适用于BootstrapVue中的modal。更直接的方法不是在编辑时将地址保存到帐户服务吗？这样，您将始终加载更新的列表。@Imre\u G我只需要更新添加/编辑或删除的地址，而不是每次都加载所有列表…您可以将代码发布到AddAddressModal和EditAddressModal组件吗？@Imre\u G我认为这不是必需的，这只是来自BootstrapVue的modal。谢谢，我会在稍后看一看。谢谢，我会在稍后看一看。需要“等待”，因为当没有添加地址时，我有警报信息，当页面打开时，我可以看到警报信息一秒钟，然后是地址