Блог

В моем веб-приложении есть два компонента: основной и модальный обновления. Я хочу, чтобы модальный компонент можно было отобразить сразу при входе на главную страницу. Итак, когда main.vue смонтирован, showModal устанавливается значение true. Однако модальный не отображается, когда Веб переходит на главную страницу. Я думаю showModal , что становится истинным и переходит к модальному компоненту. Когда я использую vue devtool, он показывает popModal значение false. Это действительно смущает меня.

Должен ли я изменить жизненный цикл, который устанавливает истинное значение или какое-либо предложение?

Спасибо!

Main.vue

 <template>
  <modal :isShow="showModal"></modal>
  ...
</template>

<script>
export default {
 data () {
   return {
    showModal: false
  }
 }

 mounted() {
  //do something
  this.showModal = true
 }
}
<script>
 

Модальный.vue

 <template>
  <modal v-if="popModal" v-model="popModal">
   <p>xxxxxx</p>
   <button @click="fn()">Click</button>
  </modal>
</template>

<script>
export default {
 props: ['isShow'],
 data () {
  return {
   popModal: this.isShow//supposed to be true
  }
 }
 methods: {
  fn() {
    this.popModal = false
  }
 }
}
<script>
 

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

 watch: {
  isShow(newVal, oldVal) {
    // newVal contains the updated value
    // oldVal contains the previous value
    this.popModal = newVal;
  }
}
 

Или вы можете инициализировать данные после изменения значения:

 // Main.vue
<modal v-if="showModal" :isShow="showModal"></modal>

// Modal.vue
<modal v-model="popModal">