Question

我已经在vuejs（2）中创建了一个嵌套的动态组件，当用户单击其中一个选项卡时，该组件将呈现另一个组件。这些选项卡是基于json-data生成的。可能会发生json注入没有为其创建特定组件的选项卡名称的情况（因此会产生错误）。在那种情况下，我想渲染一个默认组件。我怎样才能做到这一点？我已经删除了所有不相关的代码，并将其重命名为“敏感信息”。

例如：如果json弹出一个名为Seven的选项卡，该怎么办？组件七不存在。我如何确保改为使用默认组件渲染。

<template>
    <div class="card">
        <div class="card-header">
            <h3>
                <span>          
                    Card title
                </span>
            </h3>               
        </div>          

        <div class="card-block" v-if="pageDataLoaded">

            <div class="menu">
                <div>
                    <ul class="nav nav-tabs flex-container">
                        <li v-for="(item, index) in items" 
                            :key="items.itemnumber"
                            @click="currentTab = index"
                            class="nav-item">
                            <a v-bind:class="['nav-link', { active: currentTab === index }]">
                                {{ item.itemname }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>          

            <!-- content -->
            <component
                    :is = "currentTabComponent"
            ></component>
        </div>  
    </div> 
    </template>

    <script> 

    import componentOne from './one.vue'
    import componentTwo from './two.vue'
    import ComponentThree from './three.vue'
    import ComponentFour from './four.vue'
    import ComponentFive from './five.vue'
    import ComponentSix from './six.vue'
    import ComponentDefault from './default.vue'


    export default {
      name: 'component',
      components: {
          'component-one': componentOne,
          'component-two': componentTwo,
          'component-three': ComponentThree,
          'component-four': ComponentFour,
          'component-five': ComponentFive,
          'component-six': ComponentSix,
          'component-default' : SchadeprocesDefault
      },
      props: {    
        ctx: String
      },
      data: function () {
        return {        
            currentTab: 0,
            items: [],
            pageDataLoaded: false
         }
      },
        methods: {
          selectedTab () {
            var self = this;
            self.currentTab = this.selected;
            return self.currentTab
        }
      },
      mounted: function () {        
        var self = this;
        $.ajax({
            url: this.ctx + "/services/items/getall",
            type: 'GET',
            success: function(items) {
                self.items= items;  
                self.pageDataLoaded = true;     
            },
            error: function() {
                $('#error').html('<p>Nothing found.</p>');
            }
        }); 
      },
      computed: {
        currentTabComponent: function () {
          return 'schadeproces-' + this.polissen[this.currentTab].itemname

        }
      }

    }

    </script>

当动态组件不存在时设置默认组件Vuejs

0 个答案: