@ Klicken Sie während der Anzeige von MenüListe VUE2.0

Question

Ich arbeite an einem Projekt, das bestimmte Rahmen von VUE2.0 verwendet. Da ich eine Onclick-Funktion auf MENU-FOOD machen möchte, zeige dann eine Liste mit Lebensmitteln wie Burger, Chicken Wings, Salat etc. an. Wie machen wir das auf displayMenu() Funktion? Mit freundlicher Beratung

Beispiel:

MENU-FOOD
Burger Hähnchenflügel Salat MENU-DRINKS MENU-BAR

HTML VUE:

<div id="app"> 
     <aside id="side-center"> 
      <ul id="asideList" class="asideList"> 
       <li id="nav01"> 
        <div class="navmenu" @click="displayMenu()">MENE-FOOD</div> 
        <div id="side-left"> 
         <ul> 
          <li v-for="item in groceryList" v-bind:todo="item">{item.text}</li> 
         </ul> 
        </div> 
       </li> 
       <li><div class="navmenu">MENU-DRINKS</div></li> 
       <li><div class="navmenu">MENU-BAR</div></li> 
      </ul> 
     </aside> 
    </div> 

SCRIPT:

groceryList: [{ 
       text:'BURGER', 
       text:'CHICKEN WING', 
       text:'SALAD' 
      }], 

displayMenu: function() { 
       HOW DO WE DO THIS ? 
     } 

Answer 1

Sie sollten die Definition von groceryList ändern. Wenn Sie den gleichen Schlüssel text in Ihrem Objekt haben, schreibt der letzte Wert alle vorhergehenden.

Als Ergebnis ist Ihr groceryStore gleich [{"text":"SALAD"}]

Put-Namen in einem Array oder geben uniq Schlüssel für Ihre Artikel.