Vue2 - binding Attribut in Komponenten

Question

I folgende Komponente haben:

Vue.component('ordering-filters', { 
    template: ` 
     <div class="arrow-group"> 
      <a href="#" 
       :class="{'active' : isActive, 'fa fa-sort-asc fa-lg text-muted': true}" 
       aria-hidden="true" 
       @click="orderCountries({orderBy: orderBy, order: 'asc'})"         > 
      </a> 
      <a href="#" 
       :class="{'active' : isActive, 'fa fa-sort-desc fa-lg text-muted': true}" 
       aria-hidden="true" 
       @click="orderCountries({orderBy: orderBy, order: 'desc'})"> 
      </a> 
     </div> 
    `, 

    methods: { 

     orderCountries(params){ 
      this.isActive = !this.isActive; 
     } 

    }, 

    data() { 
     return { 
      orderBy: '', 
      isActive: false 
     } 
    } 

}); 

Wie kann ich binden orderBy Parameter dem HTML-Tag:

<td class="col-md-6">Country Name 
    <ordering-filters></ordering-filters> 
</td> 

Und wie kann ich isActive Parameter ändern für das angeklickte Element (setze es auf true und setze es auf false für das Element, auf das nicht geklickt wurde)?

Answer 1

1) Wenn Sie sagen "Wie kann ich einen orderBy Wert an die ordering-filters Instanz übergeben", dann suchen Sie nach props.

props: { 
    orderBy: { 
     type: String, 
     required: true 
    } 
} 

Dann

<ordering-filters :order-by="someStringVal"></ordering-filters> 

2) Für Ihre zweite Frage, Sie müssen nicht isActive brauchen.

<a href="#" :class="{'active' : order === 'asc'}" 
    @click="orderCountries({orderBy, order: 'asc'})"></a> 
<a href="#" :class="{'active' : order === 'desc'}" 
    @click="orderCountries({orderBy, order: 'desc'})"></a> 

methods: { 
    orderCountries(params){ 
     this.order = params.order 
    } 
}