Vue公司2 - 所有組件的

Question

我有以下設置更改數據值：

Vue公司代碼：

Vue.component('ordering-filters', { 
    template: ` 
      <a href="#" 
       :class="iconClass + faClass" 
       aria-hidden="true" 
       @click="orderCountries({orderBy, order})"> 
      </a>`, 

    props: { 
     orderBy: { 
      type: String, 
      required: true 
     }, 
     order: { 
      type: String, 
      required: true 
     }, 
     iconClass: { 
      type: String, 
      default: "fa fa-lg text-muted" 
     }, 
     faClass: { 
      type: String, 
      required: true 
     } 
    }, 

    methods: { 

     orderCountries(params){ 
      Event.$emit('ordering-filters', params); 
     } 

    }, 

    data() { 
     return { 
      isActive: false 
     } 
    } 

}); 

HTML代碼：

<tr> 

    <td class="col-md-6">Country Name 
     <div class="arrow-group"> 
      <ordering-filters 
       order-by="name" 
       order="asc" 
       fa-class=" fa-sort-asc" 
       ></ordering-filters> 
      <ordering-filters 
       order-by="name" 
       order="desc" 
       fa-class=" fa-sort-desc" 
       ></ordering-filters> 
     </div> 
    </td> 

    <td class="countries-visible-filter col-md-3"> 
     <visible-filters></visible-filters> 
    </td> 
    <td>Order 
     <div class="arrow-group"> 
      <ordering-filters 
       order-by="order" 
       order="asc" 
       fa-class=" fa-sort-asc" 
       ></ordering-filters> 
      <ordering-filters 
       order-by="order" 
       order="desc" 
       fa-class=" fa-sort-desc" 
       ></ordering-filters> 
     </div> 
    </td> 
    <td>Actions</td> 

</tr> 

我想改變isActive所有訂購過濾器組件點擊事件被觸發時，將其設置爲false，然後將其設置爲true單擊元素上。這可能嗎？

Answer 1

您必須以某種方式將活動元素的控制委派給父代。這是使用v模型（這只是:value和@input的快捷鍵）和一個簡單的計算道具的許多方法之一。

Vue.component('ordering-filters', { 
 
    template: `<a href="#" @click="orderCountries()"> 
 
     {{ filterId }} 
 
     <template v-if="isActive"> I'm on. </template> 
 
    </a>`, 
 
    props: ['value', 'filterId'], 
 
    computed: { 
 
    isActive() { 
 
     return this.value === this.filterId; 
 
    } 
 
    }, 
 
    methods: { 
 
    orderCountries() { 
 
     // Do some ordering stuff 
 
     this.$emit('input', this.filterId); // The active element is now this one 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     activeFilterId: null 
 
    }; 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <ordering-filters filter-id="one" v-model="activeFilterId"></ordering-filters> - 
 
    <ordering-filters filter-id="two" v-model="activeFilterId"></ordering-filters> - 
 
    <ordering-filters filter-id="three" v-model="activeFilterId"></ordering-filters> 
 
</div>