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 code：

<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 更改为所有 ordering-filters 组件，将所有组件设置为 false 然后再将其设置为 false 在点击的元素上将其设置为 true 。这可能吗？

Answer 1

您必须以某种方式将活动元素的控件委托给父级。以下是使用v-model（这只是: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>

Vue 2 - 更改所有组件的数据值

1 个答案: