Проблема с навигационным меню Nuxt / Vue в WP API V2 - PullRequest
Новая
       37

Проблема с навигационным меню Nuxt / Vue в WP API V2

0 голосов
/ 18 января 2020

Я создаю сайт с Nuxt и безголовым WordPress. Все данные поступают из WordPress API (wp- json).

У меня проблема с меню навигации, с элементами родительского / дочернего меню.

При щелчке по родительскому элементу каждый элемент меню, имеющий дочерние элементы, запускается сразу. Мне нужно, чтобы он вызывал только тот, на который я нажал.

Вот что происходит @ щёлкните прямо сейчас

Вот что у меня есть:

HTML: 

<nav>
    <div class="">
      <!-- Triggers burger menu -->
      <ul :class="isOpen ? 'block' : 'hidden'" class="sm:flex">
        <!-- Loop through the parent navigation -->
        <!-- Add click event to trigger dropdown menu -->
        <li class="sm:mx-8 text-white cursor-pointer py-4 sm:py-0" 
            v-for="item in linksArray" 
            :key="item.ID"
            @click="isOpen = !isOpen"
        >
          <!-- Insert the data from wp-json -->
          <div class="">
            <!-- Parent navigation elements -->
            <div class="flex items-center">
              <div class=""> {{item.title}} </div>
            </div>
            <!-- Child navigation here -->
            <div>
              <!-- Trigger show or hide child elements on click from above -->
              <ul 
              v-show="isOpen" 
              class="sm:absolute bg-gray-800 rounded mt-4"
              >
                <!-- Loop through the child elements -->
                <li class="text-white rounded hover:bg-gray-700 cursor-pointer py-2 px-2"
                    v-for="childItem in item.child_items" 
                    :key="childItem.ID"
                >
                  <!-- Insert the data for children from wp-json -->
                  <nuxt-link :to="childItem.url">
                    <div class="flex items-center">
                      <span class="title">
                        {{ childItem.title }}
                      </span>
                    </div>
                  </nuxt-link>

                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>

Сценарий: 

<script>
  export default {
    name: "Navbar",
    props: {
      linksArray: {
        type: Array
      },
    },
    data() {
      return {
        isOpen: false,
      };
    },
    watch: {
      // Use to close the menu on route change
      '$route'() {
        this.isOpen = false;
      },
    }
  };
</script>

wp- json ответ меню 

{
"term_id": 2,
"name": "Main",
"slug": "main",
"term_group": 0,
"term_taxonomy_id": 2,
"taxonomy": "nav_menu",
"description": "",
"parent": 0,
"count": 14,
"filter": "raw",
"items": [
{
"ID": 319,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Games",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "games",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=319",
"menu_order": 1,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 319,
"menu_item_parent": "0",
"object_id": "319",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "Games",
"url": "#",
"target": "",
"attr_title": "",
"description": "",
"classes": [],
"xfn": "",
"logo": {},
"child_items": [
{
"ID": 321,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Dota 2",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "dota-2",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=321",
"menu_order": 2,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 321,
"menu_item_parent": "319",
"object_id": "301",
"object": "games",
"type": "post_type",
"type_label": "Game",
"url": "http://localhost/games/dota-2/",
"title": "Dota 2",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"slug": "dota-2"
},
{
"ID": 322,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Overwatch",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "overwatch",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=322",
"menu_order": 3,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 322,
"menu_item_parent": "319",
"object_id": "264",
"object": "games",
"type": "post_type",
"type_label": "Game",
"url": "http://localhost/games/overwatch/",
"title": "Overwatch",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"slug": "overwatch"
},
{},
{},
{}
]
},
{
"ID": 320,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Gambling",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "gambling",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=320",
"menu_order": 7,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 320,
"menu_item_parent": "0",
"object_id": "320",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "Gambling",
"url": "#",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"child_items": [
{
"ID": 336,
"post_author": "1",
"post_date": "2020-01-12 00:46:53",
"post_date_gmt": "2020-01-12 00:46:53",
"post_content": "",
"post_title": "CSGO Gambling",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "csgo-gambling",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=336",
"menu_order": 8,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 336,
"menu_item_parent": "320",
"object_id": "336",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "CSGO Gambling",
"url": "/csgo/gambling",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {}
}
]
},
{},
{},
{}
]
}

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

Спасибо!

1 Ответ

0 голосов
/ 18 января 2020

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

Вам необходимо отследить, какие пункты меню вы хотите показать. Вот пример того, как вы могли бы достичь этого: 

new Vue({
  el: "#app",
  data: {
    menu: [{
        title: "Main one",
        children: ['child 1', 'child 2', 'child 3']
      },
      {
        title: "Main two",
        children: ['child 4', 'child 5', 'child 6']
      },
      {
        title: "Main three",
        children: ['child 7']
      },
      {
        title: "Main four",
        children: ['child 8', 'child 9']
      }
    ],
    openMenu: null
  },
  methods: {
    showChildren(i) {
      if (this.openMenu === i) this.openMenu = null
      else this.openMenu = i
    }
  }
})
li {
  margin: 8px;
  padding: 8px;
  background: pink;
  cursor: pointer;
}
<div id="app">
  <h2>menu:</h2>
  <ul>
    <li v-for="(nav, i) in menu" @click="showChildren(i)">
      {{nav.title}}
      <ul v-show="openMenu === i" v-for="child in nav.children">
        <li>{{ child }}</li>
      </ul>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

По сути, это работает, показывая только дочерние элементы, если openMenu совпадает с индексом родительских элементов в массиве.

Когда вы щелкаете по родительскому элементу, он отправляет свой индекс в функцию-функцию, которая проверяет, открыт ли он уже (openMenu равен индексу родительского элемента), и, если это так, меняет openMenu на ноль, чтобы скрыть дочерние элементы. Иначе он устанавливает openMenu в родительский индекс, делая v-show="openMenu === i" действительным для этого родителя.

...