Nuxt перерисовывает компонент по событию onclick
Вопрос заключается в следующем у меня есть Nuxt компонент Внутри него есть элементы на которых установлен онклик @click
Если мы просто юзаем сайт прыгаем по роутам то все работает отлично Но если мы перезагрузили страницу или вошли на сайт по прямой ссылке первый онклик (Первый раз когда жмем на элемент) происходит перерисовка компонента а потом все как обычно нормально
Выложу темплейт возможно кто то знает как решить этот вопрос, просто у меня Accordion схлопывается в этот момент и это не очень круто выглядит
<template lang="pug">
div
.filter
.container
.row
.col
.filter_top
| Explore secret hotel rates up to 40% off
.filter_body
.row
.col
.dropdown_custom
button.accordion-button(type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample")
template(v-if="locationStr == ''" )
template(v-if="getParamsJson.location != undefined" )
| {{currentLocationInFilter.name}}
template(v-else)
| Where’re you go
template(v-else)
| {{locationStr}}
div(class="collapse" id="collapseExample")
ul#accordionExample.accordion
li.accordion-item(v-for="location in locations")
template(v-if="currentLocationInFilter.parent_selected == location.location_id" )
button.accordion-button.collapsed.active(type="button", data-bs-toggle="collapse", :data-bs-target="'#collapse_location_' + location.location_id", aria-expanded="true", :aria-controls="'collapse_location_' + location.location_id")
| {{location.name}}
template(v-else)
button.accordion-button.collapsed(type="button", data-bs-toggle="collapse", :data-bs-target="'#collapse_location_' + location.location_id", aria-expanded="true", :aria-controls="'collapse_location_' + location.location_id")
| {{location.name}}
ol(:id="'collapse_location_' + location.location_id" data-bs-parent="#accordionExample").accordion-collapse.collapse
li(v-for="sublocal in location.child")
.ifButtonCurrent(v-if="sublocal.location_id == storeQueryCurrent.location")
label
input(type="radio" name="location" checked="checked" :value="sublocal.location_id" @click="getParamsJson.location = sublocal.location_id; locationStr = sublocal.name; currentLocationInFilter.parent_selected = location.location_id;")
| {{sublocal.name}}
.ifButtonCurrent(v-else)
label
input(type="radio" name="location" :value="sublocal.location_id" @click="getParamsJson.location = sublocal.location_id; locationStr = sublocal.name; currentLocationInFilter.parent_selected = location.location_id;")
| {{sublocal.name}}
.col
nuxt-link(:to="{ path: 'search', query: { location: getParamsJson.location }}") GO TO QUERY JSON
.filter_footer
</template>
<script>
import axios from "axios";
export default {
name: "ComponentFilterQuery",
fetch () {
let requestPageApiLocations = axios.get('http://localhost:3005/locations/').then((res) => {
this.$store.commit('filterLocations', res.data)
}).catch((error) => {
console.log(error)
})
return requestPageApiLocations
},
computed : {
locations() {
// Вернули Все Локации из стора в Разметку
return this.$store.state.locations
},
currentLocationInFilter() {
let locationsInStore = this.$store.state.locations
let locationInQuery = this.$store.app.context.query.location
let locationCurrentName
let locationParentCurrentId
for (let i = 0; i < locationsInStore.length; i++) {
for (let i2 = 0; i2 < locationsInStore[i].child.length; i2++) {
if (locationsInStore[i].child[i2].location_id == locationInQuery) {
// Вычисляем имя Дочерней локации
locationCurrentName = locationsInStore[i].child[i2].name
// Вычисляем идентификатор Региона
locationParentCurrentId = locationsInStore[i].location_id
}
}
}
console.log(locationCurrentName)
return {
"name" : locationCurrentName,
"parent_id" : locationParentCurrentId,
"parent_selected" : locationParentCurrentId
}
}
},
data() {
let storeQuery = this.$store.app.context.query
// console.log(this.$store.state.locations)
let variableGetParamsJson = {
"location": storeQuery.location,
"date": "2022-07-24",
"price": [100, 2000],
"tags": [1, 2, 3],
"types": [1, 2],
"order": ["id", "desc"],
"limit": 2,
"offset": 1,
}
return {
storeQueryCurrent: storeQuery,
getParamsJson: variableGetParamsJson,
locationStr: '',
}
},
mounted() {
}
}
</script>
<style scoped>
.accordion-button.active {
background-color: red;
}
</style>
Ответы (1 шт):
Автор решения: Сергей Гончарь-Лысенко
→ Ссылка
Оказалось проблема была в том что Вью брал разметку из SSR и все решилось с помощью тега no-ssr