Question

这是我的代码的结构：父组件通过v-if指令在子组件之间进行重排，其中一个子组件正在使用状态来定义其数据。一切正常，除了我在子组件之间切换时。当我回来时，由于状态为空，所以无法显示任何数据。

父组件：

<template>
  <div>
   <Welcome v-if="view==0" />
   <Courses v-if="view==1" /> //the component that I'm working on
   <Platforms v-if="view==2" />
  </div>
</template>

课程组件：

<template>
  <div>Content</div>
</template>

<script>
export default {
  name: 'Courses',
  computed: {
    ...mapState([
      'courses'
    ])
  },
  data () {
    return {
      courseList: [],
      len: Number,
    }
  },
  created () {
    console.log("state.courses:")
    console.log(this.courses)
    this.courseList = this.courses
    this.len = this.courses.length
  },
}
</script>

让我们说“视图”的默认值为1，当我加载页面时，将显示“课程”组件（数据完整）。如果单击按钮将“视图”的值更改为0，则会显示“欢迎”组件。但是，当我尝试返回“课程”组件时，虽然呈现了课程组件，但缺少了所有数据。

通过检查（通过控制台日志记录），我发现最初呈现“课程”组件时，状态映射正确，可以使用它，但是如果我将“视图”更改为另一个值以呈现另一个组件然后将其更改回原始值，“课程”组件仍然呈现，但状态变为未定义或为空。

编辑：澄清。

Answer 1

将courseList设置为组件名称并使用<component> 并设置一些枚举

例如

<template>
   <component :is="this.viewState" />
</template>
<script>
export default {
    // your stuff
    data() {
      return {
         viewState: 'Welcome',
      }
    },
    methods: {
      getComponent(stateNum) {
          const States = { '1': 'Welcome', '2': 'Courses', '3': 'Platforms' }
          Object.freeze(States)
          return States[stateNum]
      }
    },
    created() {
       // do your stuff here 
       const view = someTask() // someTask because I don't get it from where you're getting data
       this.viewState = this.getComponent(view)
    }
}
</script>

我实际上并没有正确理解，但是在这里我提出了一些解决您的问题的想法。

如何重新渲染具有完整数据（和状态）的组件（Vue）？

1 个答案: