Не совсем. Я хочу именно в queryString
передаешь path и обьект query
Vladislav
Карамультук
/#/user/1?param=ololo
Карамультук
передаешь path и обьект query
Если я перезагружена страницу с Урлом /#/user/1?param=ololo - меня почему то редиректит на /#/user/1
Карамультук
Есть ли возможность сохранить querystring при первом рендеринге?
Карамультук
Vladislav
хз как со слагом, но если делать
user?id=1&param=ololo работать должен
Vladislav
(не ручаюсь)
Карамультук
Блин, вроде бы достаточно очевидная вещь. И вроде должна быть востребована. Зашарить ссылку с состоянием. Например я че то отсортировал или зафильтровал
Карамультук
И не работает и не понятно почему и Гугл ничего не советует...
Карамультук
Печаль тоска
Vladislav
то что квери работает - это 100%
Vladislav
по-этому ищи ошибки)
ixplo
народ! у меня нубский вопрос:
есть компонент "карточка", их на странице несколько (в родительском компоненте "список карточек"). одна из них может быть "selected". как легче всего организовать их сообщение в данном случае?
ixplo
ну, чтобы остальные сбрасывали свой стейт "selected". первое, что приходит в голову - сообщать из карточки в родитель. а родителю рассылать всем картам айди новой избранной карты
ixplo
есть какая-нибудь мб фишка типа shared или singleton переменные в одинаковых компонентах?
ℝei
ну сделай пропс который будет ставить selected if (condition)
ixplo
угу... то есть карточка делает эмит, родитель рассылает пропсы, а карточки чекают новые данные?
ℝei
пока даже не понятно как ты рендеришь карточки. но да. просто передавай пропс и внутри карточка по нему будет ставить selected
ixplo
просто я думал мб есть какой "модификатор" или особые переменные, которые общие на все инстансы компонента
ixplo
карточки рендерятся v-for
ℝei
так у тебя же карточка это компонент да? вот внутри и будет общая переменная проверяющая стейт)
ℝei
через v-for тоже есть способ один. но мне кажется он костыльнее чем этот
ixplo
карточка - это компонент. у него есть переменная selected. но она у каждой карточки своя получается
ixplo
спасибо. но если у кого будет киллерфичная мысль - отметьте меня в сообщении, чтоб я заметил )
ℝei
карточка - это компонент. у него есть переменная selected. но она у каждой карточки своя получается
почему она своя? если это должен быть true\false поидее
ixplo
почему она своя? если это должен быть true\false поидее
это понятно, если это делается так, как ты говоришь. а если бы был элегантный способ иметь в скоупах этих карт общую переменную (как я думал изначально), то туда пишется id
ixplo
и каждая карта проверяет не на тру, а на === id
Melstone
Ребят, как сбросить data у компонента до состояния в момент mounted? При условии что в data находятся свойства в виде сложных json-объектов.
Николаич
Ребят, как сбросить data у компонента до состояния в момент mounted? При условии что в data находятся свойства в виде сложных json-объектов.
Изначально хранишь initial state в переменной и клонируешь в data. Именно клонируешь, а не присваиваешь.
Надо сбросить - клонируешь заново.
Melstone
Можно кусочек кода примерный?
Melstone
С вью совсем недавно знаком
Николаич
С телефона. Щас накидаю
Николаич
const initial = { prop: 1 }
export default {
data () {
return {...initial}
},
methods: {
reset () {
this.$data = {...initial}
}
}
}
Николаич
Как-то так
ixplo
const initial = { prop: 1 }
export default {
data () {
return {...initial}
},
methods: {
reset () {
this.$data = {...initial}
}
}
}
👍 спс, было полезно за компанию )
Николаич
Та не за что 😄
Someone
карточка - это компонент. у него есть переменная selected. но она у каждой карточки своя получается
Вообще это архитектурно не совсем правильно, мне кажется. Карточка, как дочерний компонент, вообще не обязана знать, что существуют какие-то другие карточки, и тем более не должна что-то им рассылать. Это родительский компонент должен иметь признак "текущая выбранная карточка", а потом уже передавать признак дочернему через props, что она в данный момент текущая.
ixplo
Сделал так: на клике по карточке родителю передаётся id или null. А он уже рассылает в карточки этот id. А в карточках computed: isSelected (bool)
ixplo
null, если мы деселектим текущую карту
ixplo
хм.... щас попробую карточкам сразу отдавать true/false
ixplo
хм.... щас попробую карточкам сразу отдавать true/false
<good
v-for="good in goods"
v-bind="good"
:isSelected="selectedGood === good._id" // < во
:key="good._id"
v-on:selectedGood="refreshSelectedGood"
></good>
Someone
Да, так вроде всё логично выглядит
Stanislav
На моей памяти, этот вопрос появляется в 4 раз :)
Anonymous
узнал тут как мутят екоммерс крутые чуваки. немного приуныл
Anonymous
всё уже давно схвачено
Anonymous
положняк такой - говномагенты, опенкарты уже давно легаси
Anonymous
вот - https://vuestorefront.io/
Alexey
узнал тут как мутят екоммерс крутые чуваки. немного приуныл
а чего приуныл-то? Наш вью рулед)
Anonymous
опоздал потому что
Arman
Всем привет. Есть список v-for="item in items". Как можно прикрутить селект, чтоб в нем можно было выбирать другие массивы? И список уже рендерился по выбранному массиву?
Денис
Всем привет. Есть список v-for="item in items". Как можно прикрутить селект, чтоб в нем можно было выбирать другие массивы? И список уже рендерился по выбранному массиву?
Сделай computed свойство-массив,который от селекета будет свитчить данные массивы
Arman
спасибо
Andrey
Всем привет! Нид хэлп!
Есть хранилище vuex, в котором находится блок:
carList: {
// ...
}
Есть 2 компонента, которые изменяют то или иное значение внутри переменных.
Третий компонент должен следить за изменениями этого блока и, в случае их обнаружения, делать запрос к API используя эти данные.
Я уже пробовал и:
watch: {
carList: (val, oldVal) => {
this.getCars();
}
},
computed: {
carList() {
return this.$store.state.carList;
}
}
и:
watch: {
carList: (val, oldVal) => {
this.getCars();
}
},
methods: {
carList() {
return this.$store.state.carList;
}
}
также пробовал:
watch: {
'$store.state.carList': (val, oldVal) => {
this.getCars();
}
}
Но результат один - данные изменяются, а компонент этого не видит.
Что я делаю не так? В какую сторону стоит копать?
Anton
Всем привет! Нид хэлп!
Есть хранилище vuex, в котором находится блок:
carList: {
// ...
}
Есть 2 компонента, которые изменяют то или иное значение внутри переменных.
Третий компонент должен следить за изменениями этого блока и, в случае их обнаружения, делать запрос к API используя эти данные.
Я уже пробовал и:
watch: {
carList: (val, oldVal) => {
this.getCars();
}
},
computed: {
carList() {
return this.$store.state.carList;
}
}
и:
watch: {
carList: (val, oldVal) => {
this.getCars();
}
},
methods: {
carList() {
return this.$store.state.carList;
}
}
также пробовал:
watch: {
'$store.state.carList': (val, oldVal) => {
this.getCars();
}
}
Но результат один - данные изменяются, а компонент этого не видит.
Что я делаю не так? В какую сторону стоит копать?
Попробуй watch: carList не стрелочной функцией сделать, чтобы контекст this указывал на компонент
Andrey
Попробуй watch: carList не стрелочной функцией сделать, чтобы контекст this указывал на компонент
Попробовал так:
watch: {
carList: function(val) {
console.log(val);
}
},
computed: {
carList() {
return this.$store.state.carList;
}
}
Не сработало. Буду дальше пытаться.
Roman
Andrey
с чего у тебя в computed стрелочная?
Ошибочно написал. Исправил здесь. Там сейчас carList() {} числится
Roman
Ошибочно написал. Исправил здесь. Там сейчас carList() {} числится
carList - это просто поле (в смысле не namespace)?
Andrey
carList - это просто поле (в смысле не namespace)?
Не, там нет неймспейсов. Это имя вычисляемого свойства, внутри которого идет получение значения из vuex:
computed: {
carList() {
return this.$store.state.carList;
}
}
Изначально у меня было так, но когда не сработало, уже начал дальше искать возможные пути решения.
Я точно знаю что делаю что-то не так, вот только найти эту точку не получается.
Александр
carList это массив?
Andrey
carList это массив?
Ассоциативный.
carList: {
field1: 'value',
field2: 'value',
// ...
}
Roman
Не, там нет неймспейсов. Это имя вычисляемого свойства, внутри которого идет получение значения из vuex:
computed: {
carList() {
return this.$store.state.carList;
}
}
Изначально у меня было так, но когда не сработало, уже начал дальше искать возможные пути решения.
Я точно знаю что делаю что-то не так, вот только найти эту точку не получается.
как вариант, можно при изменении твоего carList в сторе запускать action (в компонентах), в котором делать мутацию и запускать твой action с запросом к api
Александр
Ассоциативный.
carList: {
field1: 'value',
field2: 'value',
// ...
}
Как меняешь в нём данные?
Александр
Через Vue.set? Или напрямую, типа list[key] = value?
Andrey
Как меняешь в нём данные?
Внутри vuex есть мутатор:
setCarList(state, params) {
state.carList[params.key] = params.value;
}
А в компоненте:
setSortField(sortField = 'price', sortDirection = 'desc') {
this.$store.commit('setCarList', {key: 'sortField', value: sortField});
this.$store.commit('setCarList', {key: 'sortDirection', value: sortDirection});
},
Александр
Проблема в мутаторе
Александр
Почитай про реактивность и метод Vue.set
Roman
Почитай про реактивность и метод Vue.set
если свойства уже висят в carList, то оно будет так работать
Александр
если свойства уже висят в carList, то оно будет так работать
А если не висят? Думаю, у Андрея как раз такой случай
Andrey
А если не висят? Думаю, у Андрея как раз такой случай
Изначально переменные пустые.
У меня список машин. В одном компоненте фильтр данных, во втором - сортировка. А в третьем выводится непосредственно список, получая значения по API. Все данные храню во vuex. Мне показалось это наилучшим вариантом.
Demetrio
Я вот со временем выношу вещи из vuex все больше и больше
Demetrio
Скоро и вьюкс из приложения уйдет вообще
Sunlive
Скоро и вьюкс из приложения уйдет вообще
и как ты общаешься между компонентами? пропсы и ивенты? или шина недайбог?
Demetrio
Пропсы и ивенты
Demetrio
Пришлось помучать архитектуру, но вроде справился
Sunlive
и не теряешься? если надо данные прокидывать через 3-5 уровней условно