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

@юрьич · Регистрация: 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-шникам на поклон).

Новые блоги и статьи Все статьи Все блоги /
Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия	Неделя из жизни имитационной модели склада: мои кривые руки растут, откуда надо anaschu 10.08.2026 Неделя из жизни имитационной модели склада: как я почти написал неправильную логику и что с этим делать Работаю сейчас над учебно-рабочим проектом: строю в AnyLogic имитационную модель процессов. . .	Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .
Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .

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

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