Stanislav
Да, лучше computed
Иван
@ArStah Ну да, там зависит от применения
Иван
Если раскидывать его, то лучше вотчем сразу все отрабатывать
Armen
Ну если ему надо JSON только как первоначальное состояние то не подойдёт, т.к. computed не отредачишь
Armen
Даже set не поможет
Иван
Отредачишь
Igor
да надо как initial state сделать
Иван
Ну, в смысле, да, часть его не получится, конечно
Иван
Крч, watch твоё всё
Armen
Хотя да, вернётся же объект, который по сути можно будет редачить
Igor
а как заюзать вотч ?
Armen
watch: {
propName: {
handler(val) {
//делай что-то с val
},
immediate: true,
}
}
Igor
а в итоге он появится в data ? как потом к нему доступ получить ? Или самому руками в нем менять data ?
Oleh
В наблюдателе меняй
Armen
Не, тебе надо будет его распарсить и положить значения в data
Oleh
Хендлер наблюдателя срабатывает когда изменяется значения которому присвоен хендлер
Armen
watch: {
propName: {
handler(val) {
const obj = JSON.parse(val);
Object.entries(obj).forEach(([key, value]) => this[key] = value);
},
immediate: true,
}
}
Igor
тоесть в data :{
store: {}
}
нужно будет положить ?
Сергей
подскажите как чистить по событию поле type=file ?)
Иван
Вместо propName только не забудь реальное название своего пропса вставить)
Igor
да это понятно
Igor
чейчас посмотрим
Armen
тоесть в data :{
store: {}
}
нужно будет положить ?
Ну смотри, если тебе надо чтобы этот объект был в store то да, а если надо, чтобы значения верхнего уровня объекта из json записались прямо в дату то смотри мой пример выше
Иван
@rainmen2009 ну вот хз-хз, я тут на разный народ насмотреться успел)
Armen
Но учти, что для реактивности тебе надо будет создать структуру объектов в data
Igor
this это дата ?
Armen
И вообще моё мнение - так лучше не делать, надо передавать конкретные значения а не целый json
Igor
все понял
Igor
я бы передал конкретные значения но их дофига прям
Igor
и они скорее всего вырастут
Armen
Может надо разбить компонент на несколько маленьких?
Armen
this это дата ?
Т.к. структура будет уже предопределена в data - то this.something будет ссылаться на this.$data.something если оно определено в data
Igor
вот этим я собственно и занимаюсь, давай немного происню что происходит
Иван
А в чем проблема? Типа, в родительском компоненте много пропсов прописывать?
Igor
В общем у меня есть некоторый vue компонент, большой и сложный штук 40 полей у него, и все было в 1 файле, я подумал и решил все разбить на компоненты, но на текущий момент он работает не через api а просто забирает json из input type hidden обрабатывает и сново в него записывает, и когда форма сейвится это поле пишется в базу
на текущий момент нет возможности запилить api для него отдельно
Igor
я запилил точку входа в ней прописал
<config
title="Конфигуратор"
value="Тут мой json что вернет нам бекенд">
</config>
Armen
А зачем input type=hidden?
Armen
Во vue он вообще не нужен жи
Igor
сейчас этот компонет встраивается внутрь php формы
Igor
которая сабмитится постом
Armen
Понял
Igor
я подумал что могу сделать пропс, на нем инифиализировать стейт, а потом писать его в hidden поле
Armen
Это же ты спрашивал как data вотчить и записывать в input?)
Igor
но вот как это правильно организовать пока что то в голове не образовалось
Igor
да наверное иммено я
Armen
Т.е. тебе надо, чтобы компоненту передавались начальные значения, а после, при любых изменениях, оно обновляло тот input ?
Igor
да все верно
Igor
поэтому если есть $data ее можно сунуть в computed метод
Igor
и все ок
Igor
ну и работать с ней поприятнее
Иван
Парсить джсон ты можешь прямо в родителе
Женя
Ребят, как использовать наследование во Vue? Например у меня в проекте много таблиц и мне надо написать одну базовую с общими свойствами типо пагинация, по сколько элементов на страницу и т.д и остальные наследуются от этого компонента и уже вносят туда какие- то спецефичиские данные
Иван
И если в родителе нет какой-то сложного шаблона, ты можешь использовать вместо темплейта render функцию
Igor
ну вот я и планировал парсить в моем компоненте config
Женя
в документации есть эта функция?
Armen
props: [initialState],
computed: {
state() { return this.$data; }
},
watch: {
state(val) {
this.$emit('stateChanged', val);
},
initialState: {
handler(val) {
const obj = JSON.parse(val);
Object.entries(obj).forEach(([key, value]) => this.$data[key] = value);
},
immediate: true,
},
}
Igor
а компьютер разве без геттера и сеттера законно ?
Женя
список просто какой то модельки
Igor
или ты протсо для примера так
Stanislav
Иван
В таблицу просто этот список передаешь
Женя
Ну так а зачем тебе для этого отдельные компоненты?
ну у каждой модельки свои столбцы их количесвто
Igor
Это в общем-то его обычное состояние
Если я не ошибаюсь то правильнее вот так
computed: {
ids: {
get: function () {
return this.config.catalog.list.join(',')
},
set: function (newValue) {
this.$set(this.config.catalog, 'list', newValue.split(','))
},
}
},
Иван
ну у каждой модельки свои столбцы их количесвто
Ну так и передавай их пропсами в базовый компонент
Иван
<my-table :list="models" columns="["ID", "Имя", "Фамилия"]"/>
Иван
Иван
Если у тебя только get есть, то можно и как показано было сделать
Stanislav
Иван
компутеды обычно подразумевают что тебе только читать надо, а писать далеко не всегда обязательно
Женя
<my-table :list="models" columns="["ID", "Имя", "Фамилия"]"/>
Универсальная таблица это круто, но как быть тогда с логикой по удалению, добавлению и редактированию. Например в системе несколько ролей и у каждой роли свой доступ к отдельным экшенам
Ilyas
Привет, как подружить nuxt + бутстрап 4, ругается на css переменные, хотя я подключил секцию постcss в нюкст конфиге
Ilyas
Иван
На ивенты таблицы в родительском компоненте подписывайся и там уже всю логику разруливай
Armen