Question

我有一个 vue js 模态组件，它从 API 获取帐户列表，我第一次渲染该组件时，它工作正常，但随后的时间，它显示一个空列表，即使数组中有项目持有帐户列表。

请问我如何确保始终呈现列表。我在 Mounted 和 nextTick 函数中调用了这个列表。

此外，每个组件都有一个在安装之前为其创建的唯一 ID，因此通常，我希望模态能够使用新数据重新渲染。

相关conde和注释见下文

var RiskComp = (function ($, oEnc) {
    "use strict";

    var encryptor = new oEnc(
        document.getElementById('api_base_url').value
    );

    return Vue.component('riskassesment-modal-', {
       
        template: '#risk_tpl',
      
        data: function () {
            return {
                
                allProducts: [],
                products: [],
            }
        },

        computed: {
            modalId: function () {
                return 'riskassesment-modal-' + this.compId
            },

        },
        methods: {         
            getAccountTypes: function () {
                var self = this;
                $.LoadingOverlay("show");
                encryptor.send("account", "get_account_types", {
                    method: "get",
                    data: {}
                }).then(function (resp) {
                    self.allProducts = resp.data;    
                }).catch(function (resp) {
                   //
                }).finally(function () {
                   //
                });
            },

           toStep: function (stepNum) {
                this.step = stepNum;
                let $modal_body = $('.modal-body')
                $modal_body.scrollTop(0)
            },
            

            showAllProductsTab() {
                this.toStep(7)     
                this.getAccountTypes()

                $(function () {
                    $('#pills-tab li:last-child a').tab('show')

                })
            },

           

            close() {
              $('#' + this.modalId).modal('hide')
            },
        },
        created: function () {

        },
        beforeMount: function () {
            this.compId = Math.floor(Math.random() * 10000)
        },
        mounted: function () {
            $('#' + this.modalId).modal({ backdrop: 'static', keyboard: false })
            $('#' + this.modalId).modal('show')
            this.$nextTick(() => {
                // Element has definitely been added to the DOM now
            });
        },
    });
})(jQuery, OaksEncryptor)

当用户单击模式中的按钮时，我调用 showAllProductsTab。此按钮将根据传递的步骤编号将它们带到一个步骤（我使用 v-if 渲染的 div）。模态第一次按预期工作，但随后显示空卡片列表。请参阅下面的 HTML。

<div v-for="rec in recommendedProducts">
                                        <div class="card" style="width: 22rem;">
                                            <div class="card-body" @@click="showDetails(rec,8)">
                                            <h5 class="card-title font-weight-bold">{{rec.name}}</h5>
                                            <hr/>

                                            <div class="row">
                                                <div class="col">
                                                    <p class="font-weight-bold" style="color:grey;font-size:10px">Start with a minimum of &#8358 {{rec.minimumAmount  }}</p>
                                                </div>
                                                <div class="col">
                                            <p class="font-weight-bold" style="color:grey;font-size:10px">Holding Period: {{rec.holdingPeriod }}</p>

                                                </div>
                                            </div>
                                            <hr/>
                                       <button  @@click="showDetails(rec,8)" type="button" class="btn btn-secondary btn-sm pull-right">Read More</button>

                                      </div>
                                    </div>
                                        </div>

重新渲染 Vue JS 组件

0 个答案: