Question

所以我有一个按钮下拉列表正在按预期工作，但是我有一个错误，我不能重复使用相同的组件，因为它们彼此不能独立工作，而是当点击其中一个时，其他也会发生变化。

请在下面找到一个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
        }
    }
})

Answer 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>

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

1 个答案: