Question

我正在开发一个使用VUE2.0特定框架的项目。因为我想在MENU-FOOD上做一个onclick功能，然后显示食物上的项目列表，如汉堡，鸡翅，沙拉等。我们如何在displayMenu（）函数上执行此操作？请提供建议

示例：

MENU-FOOD
汉堡包鸡翅沙拉 MENU饮料菜单栏

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>

脚本：

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

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

Answer 1

您应该更改定义groceryList的方式。当对象中有相同的键text时，最后一个值会重写前面的所有键。

因此，您的groceryStore等于[{"text":"SALAD"}]

将名称放入数组中，或为项目提供uniq键。

@click显示menuList VUE2.0

1 个答案: