Vue.js VueJS自定义下拉按钮彼此不独立工作

因此，我有一个按钮下拉列表，它按预期工作，但我有一个错误，我不能重用同一个组件，因为它们都不是独立工作的，而是当一个按钮被单击时，另一个也会改变

请在下面找到一个JSFIDLE和我的代码

谢谢

<div id="app">
                <div v-on:click="menuVisible = !menuVisible" class="dropdownBtn">
                    <div v-bind:class="{ active : menuVisible }"class="dropdownBtn__title">
                        <span v-if="!btnTitle">exploring</span>
                        <span v-else>{{ btnTitle }}</span>
                    </div>
                    <div v-show="menuVisible" class="dropdownBtn__content">
                        <ul v-for="reason in reasons">
                            <li v-on:click="updateTitle(reason)">{{ reason.title }}</li>
                        </ul>
                    </div>
                </div>
  <div v-on:click="menuVisible = !menuVisible" class="dropdownBtn">
                    <div v-bind:class="{ active : menuVisible }"class="dropdownBtn__title">
                        <span v-if="!btnTitle">exploring</span>
                        <span v-else>{{ btnTitle }}</span>
                    </div>
                    <div v-show="menuVisible" class="dropdownBtn__content">
                        <ul v-for="reason in reasons">
                            <li v-on:click="updateTitle(reason)">{{ reason.title }}</li>
                        </ul>
                    </div>
                </div>
</div>


new Vue({
  el: '#app',
  data() {
        return {
            menuVisible: false,
            btnTitle: false,
            reasons: [{
                title: 'family fun',
                value: 1
            },
            {
                title: 'relaxing',
                value: 2
            },
            {
                title: 'dining',
                value: 3
            },
            {
                title: 'meetings & events',
                value: 4
            },
            {
                title: 'what\'s on',
                value: 5
            },
            {
                title: 'gold',
                value: 6
            }]
        }
    },
    methods: {
        updateTitle($event) {
            this.btnTitle = $event.title
        }
    }
})

探索
{{btnTitle}}

{{{reason.title}

探索
{{btnTitle}}

{{{reason.title}

新Vue({
el:“#应用程序”，
数据（）{
返回{
menuVisible:错误，
B：错，
原因:[{
标题:"家庭欢乐",，
价值：1
},
{
标题:"放松",，
价值：2
},
{
标题:"餐饮",，
价值：3
},
{
标题：“会议和活动”，
价值：4
},
{
标题：“正在播放什么”，
价值：5
},
{
标题:"黄金",，
价值：6
}]
}
},
方法：{
updateTitle（$event）{
this.btnTitle=$event.title
}
}
})

因此，首先，您实际上还没有为下拉列表创建可重用组件。您需要使用

Vue.component

来定义它。然后可以在根模板中使用自定义组件的标记

其次，如果您绑定到相同的数据，那么这将反映在两个模板中。您仍然需要将单独的数据传递给两个单独的下拉组件

Vue.component（'dropdown'{
模板：`
探索
{{btnTitle}}

{{{reason.title}

`,
道具：['menuVisible'，'btnTitle'，'Reasures']，
方法：{
updateTitle（$event）{
this.btnTitle=$event.title
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
原因:[
{标题：“家庭乐趣”，价值：1}，
{title:'releasing'，值：2}，
{标题：“餐饮”，价值：3}，
{标题：“会议和事件”，价值：4}，
{title:'what's on'，value:5}，
{标题：“黄金”，价值：6}
],
巴雷森：[
{title:'family bar'，值：1}，
{title:'bar releasing'，值：2}，
{标题：“酒吧餐饮”，值：3}，
{标题：“会议与酒吧”，价值：4}，
{title:'bar's on'，值：5}，
{标题：“金条”，价值：6}
]
}
}
})

---

没有给出索引，请尝试类似于arr['someId']的方法。title='foo'