Всем привет, зачем нужны server middleware в nuxt 3? когда их

нужно использовать?

Нукст можно использовать как полноценный серверный фреймворк (точнее, фулл стек), с авторизациями и т.п., тогда нужны

спасибо, но так ответ зачем они я не получил)

Ну допустим, вам надо, чтоб неавторизированных пользователей куда-то редиректило. И даже без авторизации на сервере, к примеру, надо чтоб всех с главной перенаправляло на страничку языка, который в куках сидит

В том, что я не могу у нового элемента сменить параметр при нажатии на него, хотя при этом он реагирует на клик все ок, но параметр не изменяется

так для этого есть обычные мидлвейры, которые могут сделать тоже самое и на сервере они вроде тоже работают но я хочу узнать за server middleware, что-то не понимаю вообще

Те же миддлвары, но не нужные вам на клиенте

как все сложно 😕

можешь показать весь компонент, а не кусками, а то не понятно что за параметр должен меняться по клику, потому что меняться у тебя судя по скрину должны только проперти param

Родительский или дочерний?

оба

Родительский компонент <template> <div> <div v-for="(item, ind) in dataFor" :key="ind" @click="changeParam(item)" :class="{ 'your-class': item.isActive === true }" > {{ item.name }} | {{ item.isActive }} </div> <create-component @create-new-param="addNewParam"></create-component> </div> </template> <script> import CreateComponent from "@/components/CreateComponent"; export default { data() { return { dataFor: [{ var: 1, name: 2, measure: 3, isActive: false }] } }, methods: { changeParam(item) { item.isActive = !item.isActive }, addNewParam(param) { this.dataFor.push(param); } }, components: { CreateComponent }, } </script> <style scoped> .your-class { color: red; } </style> Дочерний компонент <template> <div class="body"> <div class="parametr-item"> <div class="name">Название</div> <input type="text" placeholder="Название" v-model="param.name"> </div> <div class="parametr-item" > <div class="name">Переменная</div> <input type="text" placeholder="Переменная" v-model="param.var"> </div> <div class="parametr-item"> <div class="name">Единица измерения</div> <select v-model="param.measure" id=""> <option style="color:gray" value="" selected disabled hidden>ед. изм.</option> <option v-for="(item, ind) of measures" :value="item.value" :key="ind">{{ item.name }}</option> </select> </div> <button @click="create">Добавить элемент</button> </div> </template> <script> export default { data() { return { isShow: false, measures: [ {name: "день", value: "day"}, {name: "мес", value: "month"}, {name: "год", value: "year"}, {name: "Мбит/с", value: "mb"}, {name: "да/нет", value: "toggle"}, {name: "%", value: "percent"}, ], param: { name: "", var: "", measure: "", }, } }, methods: { create() { if (this.param.var && this.param.name && this.param.measure) { // send to server... this.param.id = Math.floor(Math.random() * 100000); this.param.isActive = false; this.$emit("create-new-param", this.param) this.param = { var: "", name: "", measure: "", } } }, }, } </script>

почему ты не создаешь новый объект ?

Например data(){ return { var: '', name: '', measure: '', } }, methods: { create(){ const newParam = { var: this.var, name: this.name, measure: this.measure } } } и биндить в шаблоне с v-model уже эти отдельные переменные

Как вариант, спасибо

Ну лан, это работает, но мне дико интересно, почему тот вариант срабатывает, что конкретно идет не так?

потеря реактивности

В чем она заключается эта потеря, если передав обычный объект, то все ок, а если реактивный, то реактивность теряется. Ну даже если она теряется, она то теряется внутри дочернего элемента, или я неправ?

на самом деле все просто, добавь isActive заранее к param, как ты сделал это для var, name etc. , и все заработает, но лучше новый объект создавать

Реактивность не у param теряется, а у isActive проперти

Ммм, благодарю за разъяснения, очень признателен