Question

我正在开发一个Vue应用程序，其中有一个Vue实例扩展了其他几个组件。

test_cases = int(input())
for case in range(test_cases):
    solutions = []
    n_r = tuple(map(lambda x: int(x), input().split()))
    n = n_r[0]
    r = n_r[1]
    excess = n - r
    if r >= n:
        print(1)
    else:
        array = [chr(i) for i in range(97, 97 + r)]
        for i in range(10**len(array)):
            digits = list(map(lambda x: int(x), str(i)))
            if sum(digits) == excess:
                solutions.append(i)
        print(len(solutions))

我现在遇到的问题是在HTML中，当调用//import <Loader/> const componentOne = Vue.extend({ mounted: function() { this.$root.$data.componentOneLoading = false } //...options }); const componentTwo = componentOne.extend({ //...options }) Vue.component('component-two', componentTwo); Loader.extend(componentOne); const vm = new Vue({ el: '#app', data: { componentOneLoading: false }, methods: { toogleComponentOne: function() { this.componentOneLoading = true; } }, components: { componentOne } });方法时，该组件将显示，但有时需要几秒钟才能显示。我想在此期间显示加载屏幕。通过设置应用程序的方式，如果我使用属性toogleComponentOne来显示componentOneLoading组件或Loading，它将无法正常工作，因为componentOne/componentTwo从未挂载而且我无法使用诸如componentOne/componentTwo之类的生命周期方法来更改mounted，因为它将安装this.$root.$data.componentOneLoading = false组件。

Loader

即使将它包装在div中，也是如此。

<div id='#app'>
   <button @click="toogleComponentOne()"
   <component-two v-if="componentOneLoading = false"></component-two>
   <loader v-else></loader> //Since componentOneLoading is set to true on event click, this will get mounted and component-two will never mount and I cant use lifecycle hooks to set it to false.
</div>

我尝试将道具传递到<div id='#app'> <button @click="toogleComponentOne()" <div v-if="componentOneLoading = false"> <component-two></component-two> </div> <div v-else> <loader v-else></loader> </div> </div>，并在这些组件的模板中使用componentOne/componentTwo，但这似乎不起作用。我必须在外面做条件如何显示v-if直到Loader完成加载并准备渲染？

Answer 1

您可以在挂载#Code above this works. tree is defined as tree = ET.fromstring(...) segArray = tree.findall(".//Purchase/Array") arrayList = np.array([]) arrayList.shape = (20,50) #there are 50 items under that tag, so 1st item is 0th element in array for i in range (0, len(segArray) - 1): arrayNew = np.array([[i,segArray[i]]]) arrayList = np.concatenate((arrayList,arrayNew)) print (arrayList)时发出自定义事件，并在其上使用事件监听器旋转component-two并使用componentOneLoading而不是v-show来确保您的元素存在于DOM上：

v-if

//componentTwo.vue
mounted : {
 ...
 this.$emit('toggleLoading')
}

在加载组件时显示加载器

1 个答案: