Всем привет, просто тренируюсь во vue. Столкнулся со странным поведением геттера во vuex - если применить в нём метод find для массива, код отказывается работать.
Итак, вот мой модуль products.js из Vuex:
export default {
namespaced: true,
state: {
items: getProducts()
},
getters: {
items(state){
return state.items;
},
mapProducts(state){
let mapArr = [];
for(let i = 0; i < state.items.length; i++){
mapArr[state.items[i].id_product] = state.items[i];
}
return mapArr;
},
get_product_by_id: (state, getters) => (id) => {
return getters.items.find((elem) => {
return elem.id_product === id;
})
},
item: (state, getters) => (id) => {
return getters.mapProducts[id];
}
}
}
function getProducts(){
return [
{
id_product: 14,
name: "Xiaomi Mi 9T Pro",
desc: "Android, экран 6.39\" AMOLED (1080x2340), Qualcomm Snapdragon 855, ОЗУ 6 ГБ, флэш-память 128 ГБ, камера 48 Мп, аккумулятор 4000 мАч, 2 SIM",
price: 520,
img: require('../../assets/img/id14.jpg')
},
{
id_product: 17,
name: "HONOR 20",
desc: "Android, экран 6.26\" IPS (1080x2340), HiSilicon Kirin 980, ОЗУ 6 ГБ, флэш-память 128 ГБ, камера 48 Мп, аккумулятор 3750 мАч, 2 SIM",
img: require('../../assets/img/id17.jpeg'),
price: 350
}
]
}
А вот мой компонент Product.vue, где я пытаюсь получить объект продукта по его id:
<template>
<div>
<h1>{{ get_product }} - {{ get_product_id }}</h1>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "Product",
data() {
return { }
},
computed: {
...mapGetters("products", {
get_product_by_id: "get_product_by_id",
item: "item"
}),
get_product_id(){
return this.$route.params.id;
},
get_product(){
console.log(this.get_product_by_id(this.get_product_id)); // В консоли undefined
return this.get_product_by_id(this.get_product_id); // Не работает и все тут
//return this.get_product_by_id(19); // Так работает!!!
//return this.item(this.get_product_id); // Так тоже работает!!!
}
},
methods: { }
}
</script>
Как видно из комментариев, в computed, в методе get_product строка
return this.get_product_by_id(this.get_product_id);
категорически отказывается работать, при попытке вывести результат в консоль пишет undefined.
При этом если вызвать:
return this.get_product_by_id(19);
то я успешно получаю объект продукта. Также успешно возвращает мне обект продукта вызов:
return this.item(this.get_product_id);
Объясните проблему вызова
return this.get_product_by_id(this.get_product_id);
Почему это не работает, хотя должно работать!!!
Проблема в том, что из строки запроса параметр роута id приходит как строка. Это можно проверить добавив оператор typeof перед id и вывести в console.log() - получим string. А метод this.get_product_by_id() требует id как число. Проблему можно решить, приведя id к числу, вот так:
return parseInt(this.$route.params.id);
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Была поставлена задача реализовать свою JSX factoryИз документации React мы знаем, что JSX транспилируется в вызов функции React
Когда пользователь желает распечатать страницу, в зависимости от того какую ориентацию, в открывшемся окне, он выберет (портретная/альбомная),...
Хотелось бы, чтобы при нажатии на кнопку прошлый клик с переменной 'hi' удалялсяНо почему-то этого не происходит