methods: {
...mapActions('api', ['getDataFromApi']),
},
created() {
this.getDataFromApi().then(res => {
if(res.status === 200 && res.data) {
this.form = res.data; // тут this.form должен изменится
}
})
},
"ru":{
"seconds":"{count} секунд | {count} секунда | {count} секунд"
}
"ru":{
"seconds":"ноль секунд | одна секунда | {n} секунды | {n} секунд"
}
CHANGE_LOCALSTORAGE: (state, products) => {
localStorage.setItem("productsInCart", JSON.stringify(state.products)); // здесь скорее всего надо передавать просто products
},
SET_PRODUCTS_TO_LOCALSTORAGE({
commit,
products
}) {
commit("CHANGE_LOCALSTORAGE", this.products); // здесь аналогично, просто products
commit("ACTIVATE_CART");
},
v-if="PRODUCTS.length" -> v-if="PRODUCTS && PRODUCTS.length"
<a href="/link">external link</a>
либо свой самописный компонент.<router-link>
- осуществляет навигацию только в рамках приложения.<template>
<div class="example">
<input type="radio" value="Один" v-model="radioValue">
<label>Один</label>
<br>
<input type="radio" value="Два" v-model="radioValue">
<label>Два</label>
<br>
Выбрано: {{ radioValue }}
<br>
<button @click="uncheckRadio">Сбросить значение</button>
</div>
</template>
<script>
export default {
name: 'example',
data() {
return {
radioValue: '',
};
},
methods: {
uncheckRadio() {
this.radioValue = '';
},
},
watch: {
radioValue(value) {
console.log(value); // какая-то логика при изменении значения
},
},
};
</script>
document.addEventListener('touchstart', this.handleTouchStart, false);
document.addEventListener('touchmove', this.handleTouchMove, false);
set(val) {
this.$store.dispatch('updateItem', { id: this.item.id, val });
}
<v-list-component :key="item.id">
иначе могут возникнуть проблемы при ререндереconst MY_APP_CONFIG = {
setting: 'value',
}
window.MY_APP_CONFIG = MY_APP_CONFIG; // ложим в глобальный объект наши настройки
<script>
export default {
data() {
return {
config: window.MY_APP_CONFIG,
};
},
created() {
console.dir(this.config);
},
}
</script>
<div class="preloader"></div>
<style>.preloader{/* preloader styles */}</style>
<div id="app"></div>
<template>
<div>
<router-view />
</div>
</template>
<script>
import { mapState } from 'vuex';
const preloader = document.querySelector('.preloader');
export default {
computed: {
...mapState('app', ['loading']),
},
watch: {
loading: {
handler(val) {
preloader.style.display = val ? '' : 'none';
},
immediate: true,
},
},
};
</script>
import Vue from 'vue';
export const state = {
loading: true,
};
export const mutations = {
SET_LOADING(state, loading) {
state.loading = loading;
},
};
export const actions = {
setLoading({ commit }, loading) {
commit('SET_LOADING', loading);
},
};
<script>
import axios from 'axios';
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions('app', ['setLoading']),
},
created() {
axios.get('/api/page-data').then(res => {
console.dir(res);
}).catch(err => {
console.dir(err);
}).finally(() => this.setLoading(false));
}
};
</script>
<div class="preloader"></div>
<style>.preloader{/* preloader styles */}</style>
<div id="app"></div>
<template>
<div>
<router-view />
</div>
</template>
<script>
const preloader = document.querySelector('.preloader');
export default {
data() {
return {
loading: true,
};
},
methods: {
setLoading(loading) {
this.loading = loading;
preloader.style.display = loading ? '' : 'none';
},
},
mounted() {
this.$on('set-loading', this.setLoading);
},
destroyed() {
this.$off('set-loading', this.setLoading);
}
};
</script>
<script>
import axios from 'axios';
export default {
created() {
axios.get('/api/page-data').then(res => {
console.dir(res);
}).catch(err => {
console.dir(err);
}).finally(() => this.$root.$emit('set-loading', false));
}
};
</script>