VueJS自定义下拉按钮不能彼此独立工作答案

【问题标题】：VueJS Custom dropdown buttons not working independently of each otherVueJS自定义下拉按钮不能彼此独立工作
【发布时间】：2018-02-27 01:45:12
【问题描述】：

所以我有一个按预期工作的按钮下拉菜单，但是我有一个错误，我不能重用相同的组件，因为它们都不能相互独立地工作，而是当单击一个时，另一个也会发生变化。

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

谢谢

<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
        }
    }
})

【问题讨论】：

没有给出索引，试试这样的 arr['someId'].title = 'foo'

标签： vue.js components

【解决方案1】：

因此，首先，您实际上并没有为下拉菜单制作可重用的组件。您需要使用Vue.component 定义它。然后就可以在根模板中使用自定义组件的标签了。

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

Vue.component('dropdown', {
  template: `
    <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>
  `,
  props: ['menuVisible', 'btnTitle', 'reasons'],
  methods: {
    updateTitle($event) {
      this.btnTitle = $event.title
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      fooReasons: [
        { 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 }
      ],
      barReasons: [
        { title: 'family bar', value: 1 },
        { title: 'bar relaxing', value: 2 },
        { title: 'bar dining', value: 3 },
        { title: 'meetings & bars', value: 4 },
        { title: 'bar\'s on', value: 5 },
        { title: 'gold bar', value: 6 }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <dropdown :menu-visible="false" :btn-title="false" :reasons="fooReasons"></dropdown>
  <dropdown :menu-visible="false" :btn-title="false" :reasons="barReasons"></dropdown>
</div>

【讨论】：