Доброго
Из за чего вылетает ошибка ?
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Я использую localstorage для корзины
Модуль
"nuxt-vuex-localstorage": "^1.3.0",
store/
export const state = () => ({
cart: [],
version: '0.0.1'
})
export const mutations = {
SET_CART (state, product) {
if(state.cart.length) {
let ProductEx = false
state.cart.map(function (item) {
if(item.id === product.id) {
ProductEx = true
item.quantity++
}
})
if(!ProductEx){
state.cart.push(product)
}
}
else{
state.cart.push(product)
}
},
SET_DELETE_FROM_CART (state, index) {
state.cart.splice(index, 1)
},
}
export const actions = {
async ADD_TO_CART ({ commit }, product) {
await commit('SET_CART', product)
},
async DELETE_FROM_CART ({ commit }, index) {
await commit('SET_DELETE_FROM_CART', index)
},
}
export const getters = {
CART (state) {
return state.cart;
},
}
Данные сохраняются в localstorage
место корзины
<cart
:cart_data="CART"
/>
import { mapActions, mapGetters } from 'vuex'
export default {
name: "RighthCart",
props: {},
beforeMount () {
},
computed: {
...mapGetters([
'TIME'
]),
...mapGetters( 'localStorage', [
'CART',
]),
totalSum () {
let totalPrice = []
for (let item of this.CART) {
totalPrice.push(item.price * item.quantity)
}
totalPrice = totalPrice.reduce(function (sum, el) {
return sum + el
})
return totalPrice;
}
},
}
корзина
<cart-item
v-for="(item, index) in cart_data"
:key = "item.id"
:cart_item="item"
@deleteFromCart = "deleteFromCart(index)"
/>
import CartItem from "~/components/cart-item.vue";
import { mapActions, mapGetters } from 'vuex'
export default {
name: "cart",
components: {CartItem},
props: {
cart_data: {
type: Array,
default(){
return []
}
}
},
methods: {
...mapActions( 'localStorage', [
'DELETE_FROM_CART'
]),
deleteFromCart (index) {
this.DELETE_FROM_CART(index)
},
},
}
далее cart_item объект непосредственно того, что положили в корзину.
помоги разрабраться плз
Средний
