Question

我有以下组件：

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

});

如何将 orderBy 参数绑定到HTML标记：

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

如何为点击的元素更改 isActive 参数（将其设置为true，并为未点击的元素将其设置为false）？

Answer 1

1）如果您说＆＃34;如何将orderBy值传递给ordering-filters实例＆＃34;，那么您正在寻找props。

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

然后

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

2）对于第二个问题，您不一定需要isActive。

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

Vue2 - 组件中的属性绑定

1 个答案: