क्षमा करें, मैं वास्तव में इन सबके लिए नया हूँ।
मैं मेनू आइटम माउस-ओवर के दौरान एक सबमेनू प्रदर्शित करने का प्रयास कर रहा हूं। मुझे मेनू आइटम की अनुक्रमणिका रिकॉर्ड करने और बूलियन मान रिकॉर्ड करने के संकेत दिए गए हैं कि उपयोगकर्ता के पास वर्तमान में शीर्ष मेनू के एनएवी कंटेनर पर अपना माउस है या नहीं। हालाँकि मुझे नहीं पता कि सबमेनू के लिए सशर्त रेंडरिंग बनाने के लिए इनका उपयोग कैसे करना है।
मैंने जो कोशिश की है वह यह है:

एचटीएमएल:

<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
            <ul id="topmenu" class="pure-menu-list">
                <li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
                <a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
                </li>
            </ul>
            <div class="pure-menu">
                <ul id="submenu" class="pure-menu-list">
                    <li v-if= "topmenuhover == true" class="pure-menu-item">
                    <a v-bind:href="topmenu[topmenuitem].submenus.url" class="pure-menu-link">{{ topmenu[topmenuitem].submenus.title }}</a></li>
                </ul>
            </div>
</nav>
</div>

जेएस:

var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : -1,
topmenuhover : false,
topmenu: [
    { title:'Home', url:'/', submenus: [] },
    { title:'About', url:'/about', 
        submenus: [
            { title:'Who we are',   url:'/about#us' },
            { title:'What we do',   url:'/about#store' },
            { title:'Our range',     url:'/about#range' }
        ]
    },
    { title:'Contact Us',   url:'/contact', 
        submenus: [
            { title:'Information',   url:'/contact#info' },
            { title:'Returns',   url:'/contact#return' },
            { title:'Locate Us',     url:'/contact#locate' }
        ]
    }
    ]
},
methods: {
mouseOver: function(index){
    this.topmenuitem=index;
},
mouseOverNav: function(){
  this.topmenuhover = true;
},
mouseLeaveNav: function(){
  this.topmenuhover = false;
}
}
});

क्या कोई मुझे इस बारे में सहायता कर सकता है? धन्यवाद!

0
user672518 2 मई 2020, 13:50

1 उत्तर

सबसे बढ़िया उत्तर

जावास्क्रिप्ट भाग को चाल चलनी चाहिए, आपको वास्तव में सबमेनू प्रस्तुत करने के लिए टेम्पलेट को थोड़ा सा ट्विक करने की आवश्यकता है। यहां बताया गया है कि आप इसे कैसे कर सकते हैं:

var vueinst = new Vue({
  el: "#vuemain",
  data: {
    topmenuitem: -1,
    topmenuhover: false,
    topmenu: [
      { title: "Home", url: "/", submenus: [] },
      {
        title: "About",
        url: "/about",
        submenus: [
          { title: "Who we are", url: "/about#us" },
          { title: "What we do", url: "/about#store" },
          { title: "Our range", url: "/about#range" },
        ],
      },
      {
        title: "Contact Us",
        url: "/contact",
        submenus: [
          { title: "Information", url: "/contact#info" },
          { title: "Returns", url: "/contact#return" },
          { title: "Locate Us", url: "/contact#locate" },
        ],
      },
    ],
  },
  methods: {
    mouseOver: function (index) {
      this.topmenuitem = index;
    },
    mouseOverNav: function () {
      this.topmenuhover = true;
    },
    mouseLeaveNav: function () {
      this.topmenuhover = false;
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vuemain">
  <nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
    <ul id="topmenu" class="pure-menu-list">
      <li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
        <a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
      </li>
    </ul>
    <div class="pure-menu">
      <ul v-if="topmenuhover" id="submenu" class="pure-menu-list">
        <li v-for="subitem in topmenu[topmenuitem].submenus" class="pure-menu-item">
          <a v-bind:href="subitem.url" class="pure-menu-link">{{ subitem.title }}</a></li>
      </ul>
    </div>
  </nav>
</div>
0
paulgv 2 मई 2020, 15:06