VueJSカスタムドロップダウンボタンは互いに独立して動作しません

Question

ボタンのドロップダウンが期待どおりに機能していますが、同じコンポーネントを再利用できないバグがあります。 1つは他の変更もクリックされます。

下記の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

は、1のために、あなたが実際にドロップダウンのための再利用可能なコンポーネントを行っていません。 Vue.componentを使用して定義する必要があります。次に、ルートテンプレートのカスタムコンポーネントのタグを使用できます。

第2に、同じデータにバインドしている場合は、両方のテンプレートに反映されます。それでも、別々のデータを2つの個別のドロップダウンコンポーネントに渡す必要があります。

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>