Question

我有三个Vue组件。一个是页面列表，它包括一个过滤器和一个列表。呈现页面列表组件时，它需要解析一些JSON并将该对象传递到过滤器组件中。我发现有问题的地方是，已渲染滤镜组件之后，已安装的脚本正在运行，因此，没有对象传递到滤镜内进行渲染，我该如何绕过？我已经检查了Vue周期，但是我一生都无法找出问题所在。

在过滤器组件上，当我输出{{test}}时，它会显示正确的文本“ yayaya”，因为它是字符串，并且没有传递需要操纵的对象。为什么当我在过滤器组件上输出{{dataTagGroups}}时，它什么也不返回，因此为空。

列出页面组件

   <template>
<div>
    <section class="mega-filter js-mega-filter">

        <mega-filter
            :dataEndpoint="dataEndpoint"
            :dataTagGroups='dataTagGroups'
            :dataSortOptions='dataSortOptions'
            test="yayaya"
            v-cloak
        >
            <!-- label for sort filter -->
            <template slot="sortLabel">Sort</template>
            <template slot="sortLabelMobile">Sort by</template>
        </mega-filter>

   
    </section>
    </div>
</template>

<script>
    import listingcards from '../listing-cards/_listing-cards.vue';
    import megafilter from '../megaFilter/_mega-filter.vue';
    import axios from 'axios';
    export default {
        name: 'listing-cards-list',
        components: {
        'mega-filter': megafilter
        },
        data() {
            return {
                dataEndpoint: '',
                dataTagGroups: {},
                dataSortOptions: {},
                dataNumItems: '',
                dataPageSize: ''
                
            };
        },
        props: {
           
        },
        directives: {
            
        },
        methods: {
           
        },
        mounted() {
            
            
                this.dataEndpoint = this.$el.attributes['data-endpoint-url'] ? this.$el.attributes['data-endpoint-url'].value : null;
            console.log(this.dataEndpoint)
                // set tagGroups options
                const tagGroups = this.$el.attributes['data-tag-options'] ? this.$el.attributes['data-tag-options'].value : null;
                if (tagGroups) {
                    try {
                        this.dataTagGroups = JSON.parse(tagGroups)['tagGroups'];
                    } catch(err) {
                        console.error('Error parsing sort options');
                    }
                }
                console.log(this.dataTagGroups)
                // set sort options
                const sortOptions = this.$el.attributes['data-sort-options'] ? this.$el.attributes['data-sort-options'].value : null;
                if (sortOptions) {
                    try {
                        this.dataSortOptions = JSON.parse(sortOptions)['sortOptions'];
                    } catch(err) {
                        console.error('Error parsing sort options');
                    }
                }
                 console.log(this.dataSortOptions)

            
        }
    }
</script>

过滤器组件

<template>
    <div class="mega-filter__container l-padding">

        {{dataEndpoint}}
 
    </div>  
</template>

<script>
import { mixin as clickedOutsideDrawer } from 'vue-on-click-outside';
import axios from 'axios';


export default {
    name: 'mega-filter',
    data() {
        return {
            
            dataNumItems: '',
            dataPageSize: '',
            tagFilters: [],
            sortByFilters: [],
            
            url: '',
            ...CONFIG
        }
    },

    props: {
          dataEndpoint: '',
            dataTagGroups: {},
            dataSortOptions: {},
            test:''
    },

    mounted() {
       
    },
    methods: {
      
    }
}
</script>

Answer 1

您最初可以将数据中的dataTagGroups和dataSortOptions设置为null，并且仅在不再为空时显示过滤器。

 data() {
   return {
    dataEndpoint: '',
    dataTagGroups: null,
    dataSortOptions: null,
    dataNumItems: '',
    dataPageSize: ''
 },

然后您可以在模板中使用v-if仅在满足这些条件的情况下呈现过滤器。

<section class="mega-filter js-mega-filter">
  <mega-filter
    v-if="dataEndpoint && dataTagGroups"
    :dataEndpoint="dataEndpoint"
    :dataTagGroups='dataTagGroups'
    data-tag-name=""
    :dataSortOptions='dataSortOptions'
    data-sort-name=""
    data-sort-direction-name=""
    data-sort-direction-value=""
    data-facet-options=""
    data-num-items="10"
    data-page-size="5"
    data-language=""
    test="yayaya"
    v-cloak
  >
    <!-- label for sort filter -->
    <template slot="sortLabel">Sort</template>
    <template slot="sortLabelMobile">Sort by</template>
  </mega-filter>
  <div v-else>
    Data not ready yet... Loading...
  </div>
</section>

VUE JS安装后将对象传递给子对象

1 个答案: