Блог

Я открываю один и тот же контент компонента, так как у меня есть другой, (проблема с рендерингом )

У меня есть модальный компонент под названием modal.vue (многоразовый), поэтому каждый раз, когда я создаю компонент, я вызываю модальный компонент и добавляю новый контент,

Проблема в том, что у меня есть два компонента ( country.vue и city.vue), я импортирую их оба в свой index.vue

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

может кто-нибудь объяснить мне решение, пожалуйста, это мой код

modal.vue ( может использоваться повторно )

 <template>
    <div class="right-bar" :class="(size == null) ? 'right-bar-35' : size">
      <simplebar class="h-100">
        <div class="rightbar-title px-3 py-4">
          <div class="row">
            <div class="col-lg-10">
              <h5 class="m-0">{{title}}</h5>
            </div>
            <div class="col-lg-2 text-right">
              <span class="clickable" @click="hideRightSidebar"><i class="mdi mdi-close-thick"></i></span>
            </div>
          </div>
        </div>
        <div class="px-3 py-4">
          <slot/>
        </div>
        <footer class="modal-footer">
          <button type="button" class="btn btn-secondary" style="float:left;">Cancel</button>
          <slot name="footer"/>
        </footer>
      </simplebar>
    </div>
</template>
 

как вы можете видеть, у меня <slot/> в компоненте есть a, поэтому каждый раз вводите новый контент.

Это мой компонент country.vue ( я использую здесь компонент modal.vue )

 <template>
    <div>
        <button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
        <modal title="countries" v-if="showModal">
               i 'am the country modal
        </modal>
    </div>
</template>
<script>
import RightBar from "@/components/modal";

export default {
    data() {
        return {
            showModal: false
        }
    },
    components:{
        modal,
    },
    methods: {
        init: function(){
            this.showModal= true;
        }
    }
}
</script>
 

This is my city.vue component ( i use here modal.vue component )

 <template>
    <div>
        <button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
        <modal title="cities" v-if="showModal">
               i 'am the citymodal
        </modal>
    </div>
</template>
<script>
import RightBar from "@/components/modal";

export default {
    data() {
        return {
            showModal: false
        }
    },
    components:{
        modal,
    },
    methods: {
        init: function(){
            this.showModal= true;
        }
    }
}
</script>
 

Это мой index.vue ( где я загружаю city.vue и country.vue), как вы можете видеть, у обоих моих компонентов есть кнопка

 <template>
    <div>
       <city></city>
       <country></country>
    </div>
</template>
<script>
import addContact from "./city.vue";
import filterContact from "./country.vue";
export default {
    components:{city,country}
    data(){
        return {
        }
    }
}
</script>
 

Поэтому, когда я нажимаю на город, я вижу модальную страну ( проблема повторного рендеринга), как я могу это решить

Вот пример:

в компоненте «Город и страна» добавьте функцию, которая сообщает родительскому компоненту о том, что будет повторная передача. вы вызываете эту функцию, как только нажимаете на кнопку показать модальный режим.

 init(){
  this.rerender()
  this.showModal= true
},
rerender(){
  this.$emit('forceRerender', true)
}
 

затем в родительском компоненте мы прослушаем эту функцию и повторим.

 <city v-if="isCountry" v-on:forceRerender="hideCountry" />
<country v-if="isCity" v-on:forceRerender="hideCity" />

data(){
  return{
    isCountry: true,
    isCity: true,
  }
},
methods:{
  hideCountry(){
    this.isCountry= false
    this.$nextTick(()=>{
      this.isCountry= ture
    })
  },
  hideCity(){
    this.isCity= false
    this.$nextTick(()=>{
      this.isCity= ture
    })
  }
}
 

чтобы сломать его. когда мы хотим загрузить модальный из компонента «город», мы говорим компоненту «страна» сначала закрыть модальный. Я надеюсь, что это сработает для вас.

другой способ с помощью оператора switch:

город:

 rerender(){
  this.$emit('forceRerender', 'city')
}
 

Страна:

 rerender(){
  this.$emit('forceRerender', 'country')
}
 

родительский компонент:

 <city v-if="isCountry" v-on:forceRerender="setActiveElement" />
<country v-if="isCity" v-on:forceRerender="setActiveElement" />

setActiveElement(element){
  switch(element){
    case 'city':
      this.isCity = true
      this.isCountry = false
      this.$nextTick().then(()=>{
        this.isCountry = true
      })
      break
    case 'country':
      this.isCountry = true
      this.isCity = false
      this.$nextTick().then(()=>{
        this.isCity= true
      })
      break
    default: 
      this.isCountry = this.isCity = true
      break
  }
}