Как повторно визуализировать компонент (Vue) с его данными (и состоянием) без изменений?

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, когда я загружаю страницу, будет показан компонент "Курсы" (вместе с данными). Если я нажимаю кнопку, чтобы изменить значение «view» на 0, отображается компонент «Добро пожаловать». Однако, когда я попытался go вернуться к компоненту «Курсы», компонент курсов визуализировался, но в нем отсутствовали все данные.

При проверке (через ведение журнала консоли) я обнаружил, что при первоначальной визуализации компонента «Курсы» состояние отображалось правильно, и я мог его использовать, но если бы я изменил «представление» на другое значение, визуализировать другой компонент, а затем вернуть его к исходному значению, компонент «Курсы» по-прежнему отображается, но состояние становится неопределенным или нулевым.

РЕДАКТИРОВАТЬ: Уточнение.

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>

Я не совсем правильно понял, но здесь я дал некоторую идею решения вашей проблемы.