Vue.js - 如何使用相同的選擇器處理所有元素？

Question

如何創建一個 Vue.js 邏輯來處理具有相同類選擇器的所有標簽元素？

我有這個簡單的代碼： http : //jsfiddle.net/x2spo1qu/

var dropdown = new Vue({
  el: '.dropdown',
  data: {
    is_open : false
  },
  methods: {
    onClick: function (event) {
      // # toggle the dropdown open/closed state
      // ---
      this.is_open = ! this.is_open;
    },
    mouseLeave: function (event) {
      // # set show of dropdown to false
      // ----
      this.is_open = false;
    }
  }
});

但它僅適用於 HTML 中的第一個下拉列表，不適用於第二個下拉列表。

請解釋我如何做到這一點。

Answer 1

來自 vuejs.org ：

Vue.js 使用基於 DOM 的模板。 每個 Vue 實例都與一個相應的 DOM 元素相關聯。 創建 Vue 實例時，它會遞歸遍歷其根元素的所有子節點，同時設置必要的數據綁定。 視圖編譯后，它會響應數據更改。

您可以使用 Vue 組件系統來實現這一點，請遵循以下示例：

var bs3_dropdown = Vue.extend
({
    props: ['name'],
    replace: true,

    template: '<li class="dropdown" v-class="open : is_open" v-on="mouseleave : mouseLeave"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" v-on="click : onClick">{{ name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <content></content> </ul> </li>',

    data: function () {
        return  {
            is_open: false,
        }
    },

    methods : {
        onClick : function(event) {
            // # toggle the dropdown open/closed state
            // ---
            this.is_open = ! this.is_open;
        },
        mouseLeave : function(event) {
            // # set show of dropdown to false
            // ----
            this.is_open = false;
        }
    },

    created: function () {
        console.log('An instance of MyComponent has been created!')
    }
});

Vue.component('bs3-dropdown', bs3_dropdown);

• 完整： http : //jsfiddle.net/msa965j5/
• 由於初始 HTML 存在一些錯誤