@givemoneybiatch
Немного веб, немного гейм

Почему не перерисовывается компонент Vue?

Есть компонент условно говоря StepComponent, который отвечает за страницу `/steps`
<template>
    <div>
      <b-row v-show="currentStep === 1">
      </b-row>
      <b-row v-show="currentStep === 2">
      </b-row>
    </div>
</template>


И есть компонент SearchComponent, который встроен в хедере и видимый на всех страницах.
<template>
    <div v-bind:class="{ active: searchOpen }">
        <input type="text" v-model="code" />
        <button v-on:click="openStep">
        </button>
    </div>
</template>


Когда я ввел данные в этом поиске, необходимо открыть страницу `/steps` на том шаге, который был указан в поиске.
<script>
export default {
  data() {
    return {
      code: ""
    };
  },
  methods: {
    openScan() {
        // обновляем свойство принудительно, чтобы обновить <router-view>
       // https://laracasts.com/discuss/channels/vue/vue-2-reload-component-when-same-route-is-requested
        this.$router.forceReloadKey = new Date().getTime();
        this.$router.push({ path: "/steps", params: { currentStep: 2 } });
    }
  }
};
</script>

App.vue
<template>
  <div id="app">
    <component :is="layout">
        <transition name="fade" mode="out-in">
            <router-view :key="$route.forceReloadKey"></router-view>
        </transition>
    </component>
  </div>
</template>


По факту дочерние компоненты не обновляются - события created, mounted не вызываются заново , более того даже наблюдение за свойством роутера напрямую не помогло.

export default {
  components: { },
  data() {
    return {
      currentStep: 1
    };
  },
  mounted() {
    // срабатывает только раз
    console.log("mounted");
  },
  created() {
    // срабатывает только раз
    console.log("created");
  },
  methods: {}
  watch: {
    "this.$router.forceReloadKey"() {
      // не срабатывает при обновлении forceReloadKey из другого компонента
      console.log("forceReloadKey");
    }
  }
};
  • Вопрос задан
  • 1327 просмотров
Пригласить эксперта
Ответы на вопрос 2
@2perca
вам стоило использовать v-if вместо v-show, тк v-show переключает только display: block/none, а v-if ренедерит заново компонент, вызывая хуки жизненного цикла
Ответ написан
Комментировать
@givemoneybiatch Автор вопроса
Немного веб, немного гейм
Может будет кому полезно. По сути, чтобы обновить один компонент из другого (в моем случае соседнего)
нужно всего лишь в одном компоненте послать сообщение
this.$root.$emit("newEvent", "Hello");
в другом - принять его
mounted() {
    this.$root.$on("newEvent", code => {
    });
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы