<SwiperSlide v-for="(slide, index) in slides"> ---- вот слайды со слайдером
<Swiper @swiper="setThumbs[index]"> вот слайдер где передаю методы
<SwiperSlide v-for="thumbs in slide.slides">
{{ thumbs.img }}
</SwiperSlide>
</Swiper>
<Swiper :thumbs="thumbs[index]"> тут рендер thumbs где передаю те верхние слайдеры, но тут null получается
<SwiperSlide v-for="swipe in slide.slides">
{{ swipe.img }}
</SwiperSlide>
</Swiper>
</SwiperSlide>let thumbsSwiper0 = ref(null);
let thumbsSwiper1 = ref(null);
let thumbsSwiper2 = ref(null);
const setThumbsSwiper0 = (swiper) => {
thumbsSwiper0.value = swiper;
}
const setThumbsSwiper1 = (swiper) => {
thumbsSwiper1.value = swiper;
}
const setThumbsSwiper2 = (swiper) => {
thumbsSwiper2.value = swiper;
}
let setThumbs = [setThumbsSwiper0, setThumbsSwiper1, setThumbsSwiper2]
let thumbs = [thumbsSwiper0.value, thumbsSwiper1.value,thumbsSwiper2.value]checkWidth(){
this.containerWidth = this.$refs.container.offsetWidth
if(this.containerWidth <= this.allElementWidth) {
console.log('не влезают');
} else {
console.log('влезают!');
}
},
checkChildrenWidth() {
const children = Array.from(this.$refs.container.childNodes);
this.allElementWidth = children.reduce(function(sum, elem) {
return sum + elem.offsetWidth;
}, 0);
}<b-form-radio-group
v-model="investmentSize"
:options="options"
name="radio-inline"
class="shadow-none"
/>
</b-form-group>data: () => ({
test: 333,
investmentAmountOptions: [{
text: 'text 1', value: 'below1000',
}, {
text: 'текст 2', value: 'between1000',
}, {
text: 'текст 3', value: 'above15000',
}],
}),async REGISTRATION({ commit }, payload) {
const resp = await axios.post(`${BASE_URL}/auth/sign-up`, payload);
console.log(resp);
},async registration() {
const payload = {
email: this.email,
password: this.password,
firstName: this.firstName,
lastName: this.lastName,
};
try {
await this.$store.dispatch('auth/REGISTRATION', payload);
this.showConfirm();
} catch (e) {
console.log(e);
}
},export default {
created() {
this.$store.dispatch('GET_CHARACTERS');
},
}<template>
<div class="card">
<div v-for="n in $store.state.characters" :key="n.id" class="character">
<div>Name: {{ n.name }}</div>
<div>Birth year: {{ n.birth_year }}</div>
</div>
</div>
</template>
<script>
export default {
created() {
this.$store.dispatch('GET_CHARACTERS');
},
}
</script>import {createStore} from 'vuex'
const axios = require('axios');
const baseURL = 'https://swapi.dev/api/people/';
export default createStore({
state: {
characters: [],
},
mutations: {
SET_CHARACTERS: (state, payload) => {
state.characters = payload;
},
},
actions: {
GET_CHARACTERS: async (context) => {
const response = await axios.get(baseURL);
context.commit('SET_CHARACTERS', response.data.results);
}
},
getters: {
CHARACTERS: state => {
return state.characters;
}
},
modules: {}
})<template>
<div class="card">
<div>{{ $store.state.characters }}</div>
</div>
</template>
<script>
import {mapGetters, mapActions, mapMutations} from 'vuex';
export default {
computed: {
...mapGetters(['CHARACTERS'])
},
methods: {
...mapMutations(['SET_CHARACTERS']),
...mapActions(['GET_CHARACTERS'])
},
mounted() {
console.log(this.$store.state)
},
}
</script>
<style lang="scss" src="./card.scss">
</style>