Скрыть-показать подменю

@юрьич · Регистрация: 10.09.2012

Студворк — интернет-сервис помощи студентам

Привет.

HTML5
1
2
3
4
5
6
7
8
9
10
 <ul >  
<li  v-for="item in menu" :key='item' >
<a :id="item.id" href="javascript:void(0)" @click="getMenu($event,item.menu_id,item.id)">{{item['title']}}</a>
<ul v-if="item.menu_id==el?show:''" >
<li> 
<a href="javascript:void(0)" class="dynatree-title">{{item['item_title']}}</a>
</li>
 </ul>
    </li>
      </ul>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data(){
return{
 
  show: '',
  el:'',
 
}
},
methods: {
getMenu(e,menu_id,id) {
  this.el = e.target.id;
  if(e.target.id == menu_id){
    this.show = ! this.show;
    }
}
}

Сейчас, если я кликаю по меню 1, подъменю 1 открывается, так как show переходит в true. Но если я кликну по меню 2, то первое закрывается( show переходит в false), но второе не открывается. Как это можно решить. Как то show привязать к item,наверное.

@voral · 26.10.2022, 23:54

Оформляете пункт меню как отдельный компонент, значит можете внутри этого компонента опредeлить "data". И там определить show. Она будет существовать только внутри этого компонента.

Вы же берете show в компоненте меню, передаете компонете подменю - это даже не логично. У вас не нужно вообще компонент подменю показывать если show = false. Зачем? А я предлагал сделать компоненты: меню и пункт меню..... и show это именно в пункте меню сидит и переключается. и там же отображает или скрывает список дочерних пунктов (не передавая пропсом внутрь дочернего)

Прям вот советую: не поленитесь на ютубе роликов про основы vue как грязи (берите только посвежее). Да они, чаще всего, не особо качественные, но суть понять вполне можно, а дальше уже к документации. Просто один фиг мне сейчас либо надо за вас сделать, либо пересказать первые главы документации. Легче тогда пойти от обратного: вы читаете доку и спрашиваете, что там было не понятно по мере чтения.

@юрьич · 27.10.2022, 07:18 **[ТС]**

Ок. Я понял. Доки читаю. Но там всё как под копирку. Например решил почитать про внутренние состояния. Вот часть кода,присутствующая почти в каждом примере

JavaScript
1
2
3
4
5
6
import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');

И вот откуда мне знать, что такое './store' А ведь это важная часть кода.
Но это лирика). Спасибо. Направление ясно. Буду курить маны)

@voral · 27.10.2022, 08:06

Это уже не уровень компонента. В компоненте вы описываете в "data". А вообще лучше ориентироваться на Compostition API в таком случае надо просто в методе setup определить ее (ну и вернуть из него в результрующем объекте)

JavaScript
1
2
3
4
5
6
7
8
9
setup() {
    //...
    const show = ref(false);
    //...
    return {
        show,
        //...
    };
}

@юрьич · 27.10.2022, 11:24 **[ТС]**

Всё получилось. Спасибо. Теперь встал вопрос со вложенностью, но это вопрос к php. Что то до третьего уровня только возвращает. Пойду к Laravel-шникам на поклон).

Новые блоги и статьи Все статьи Все блоги /
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))
Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .	[EasyBuilder Pro] Памятка по разработке для панелей Weintek ФедосеевПавел 26.08.2026 Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .	Модель по догадкам anaschu 25.08.2026 Прошло две недели. Я уже рассказывал, как разговаривал с сотрудниками у сортировки и как понял, что главная ветка — не про приёмку, а про отбор. Но тогда я думал, что понял механику. На этой неделе я. . .

@voral 3061 / 1464 / 265 Регистрация: 16.03.2008 Сообщений: 6,511 Записей в блоге: 2
	26.10.2022, 23:54
	Оформляете пункт меню как отдельный компонент, значит можете внутри этого компонента опредeлить "data". И там определить show. Она будет существовать только внутри этого компонента. Вы же берете show в компоненте меню, передаете компонете подменю - это даже не логично. У вас не нужно вообще компонент подменю показывать если show = false. Зачем? А я предлагал сделать компоненты: меню и пункт меню..... и show это именно в пункте меню сидит и переключается. и там же отображает или скрывает список дочерних пунктов (не передавая пропсом внутрь дочернего) Прям вот советую: не поленитесь на ютубе роликов про основы vue как грязи (берите только посвежее). Да они, чаще всего, не особо качественные, но суть понять вполне можно, а дальше уже к документации. Просто один фиг мне сейчас либо надо за вас сделать, либо пересказать первые главы документации. Легче тогда пойти от обратного: вы читаете доку и спрашиваете, что там было не понятно по мере чтения. 1

@юрьич 14 / 9 / 13 Регистрация: 10.09.2012 Сообщений: 1,143
	27.10.2022, 11:24 [ТС]
	Всё получилось. Спасибо. Теперь встал вопрос со вложенностью, но это вопрос к php. Что то до третьего уровня только возвращает. Пойду к Laravel-шникам на поклон). 0

Опции темы