vue onclick 对父组件中的子组件进行排序

Question

我正在使用 Vue cli，我有一组用户，我想在模板中显示为个人资料卡，我想按名称排序。 我正在使用 Vuex 来存储数据。

在我的模板中的子组件中：

<div class="outside"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
    <div class="stay">  <p class="n"> {{ item.name }}</p> </div>

我正在获取 Vuex 数据：

computed: {
    arrays () {
      return this.$store.state.arrays
    },
}

我的数组包含：

 arrays: [
      { name: 'Peter'},
      { name: 'Beth'},
      { name: 'Daniel'},
    ]

我在子组件中使用了一个函数：

computed:{
   sortedArray: function() {
    function compare(a, b) {
      if (a.name < b.name)
        return -1;
      if (a.name > b.name)
        return 1;
      return 0;
    }

    return this.arrays.sort(compare);
  }
  },

并将模板更改为：

<div class="outside"  v-for="(item, index) in sortedArrays" :key="item.id" v-bind:id="item.name">

但我想要一种方法来执行此操作（在父级中），而不是始终按顺序显示。

在我的父组件中：

<div class="begin">
<div class="b">Sort By:
                
 <select name="sort" class="sort" >
  <option value="name" @click="sortArrays()">Name</option>
 </select>
 </div>

<childComponent></childComponent>

</div>

我想要一个 sortArrays 函数，当我单击按名称排序时，我可以在父级中使用该函数以按字母顺序显示用户个人资料卡。

非常感谢！

Answer 1

您可以在 props 中将数组从父级发送到子级

使用道具

家长

.html

<div class="begin">
  <div class="b">Sort By:
            
     <select name="sort" class="sort" >
        <option value="name" @click="sortArray()">Name</option>
     </select>
  </div>

  <childComponent :arrays=arrays></childComponent>

</div>

.Vue

new Vue({
  data() {
    return {
      arrays: this.$store.state.arrays
    }
  },
  methods: {
    sortArray: function() {
       this.array.sort((a, b) => return a.name < b.name ? -1 : 1)
    }
  }
})

儿童

.Vue

new Vue({
   props: ['arrays']
})

使用排序标志

子组件将接受来自父组件的排序道具。当在父级上单击排序时，它将为真并发送给子级。在 Prop Change 时，child 将排序并显示排序后的数组。

儿童

.Vue

new Vue({
  props: ['isSorted],
  watch: {
    isSorted: function(oldval, newVal){
      if(newVal) {
        // Do the sorting
      }
    }
  }
})

家长

.Vue

 new Vue({ data(){ return { isSorted: false }}, methods: { sortArrays: { this.isSorted = true; } }})

.html

  <child-component :isSorted=isSorted></child-component>

更新

change 事件可以绑定到选择。

<select name="sort" class="sort" @change="sortArray" v-model="filter">
    <option value="name">Name</option>
 </select>

在 Vue 中

props: { filter: ''},
methods: { sortArray: function() { if(this.filter === 'name') // Do the sorting }}

Answer 2

在您的数据中添加一个带有 bool 值的 showSorted：

data(){
   return {
    showSorted: false
   }
 }

然后编辑您的计算结果以使用 showSorted：

computed:{
   sortedArray: function() {
    function compare(a, b) {
      if (a.name < b.name)
        return -1;
      if (a.name > b.name)
        return 1;
      return 0;
    }
    if(this.showSorted){
        return this.arrays.sort(compare);
     }
     return this.arrays;
  }
  },

然后 onClick 你只需将this.showSorted 设置为true；

Answer 3

将数组、sortedArray 计算机属性移动到父组件 并将要显示的数组作为prop传递给子组件

处理父组件中的所有逻辑，下面是一个代码sn-p，它显示了基本操作。希望您可以根据需要进行更改。

var ChildComponent = {
  template: "<div>{{ sortedArray }}</div>",
  props: {
    sortedArray: {
      type: Array,
      default: () => [],
    }
  }
}

var app = new Vue({
  el: '#app',
  components: { ChildComponent },
  data: {
     sortBy: "",
     array: [
      { name: 'Peter', age: 24},
      { name: 'Beth', age: 15},
      { name: 'Daniel', age: 30},
    ]
  },
  computed: {
    displayArray() {
      // declare the compare functions
      // for name
      function cmpName(a, b) {
        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }
      // for age
      function cmpAge(a, b) {
        if (a.age < b.age)
          return -1;
        if (a.age > b.age)
          return 1;
        return 0;
      }
      
      if (this.sortBy === "name") return this.array.sort(cmpName);
      else if (this.sortBy === "age") return this.array.sort(cmpAge);
      else return this.array;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="sortBy">
    <option value="">Please select a value</option>
    <option value="name">name</option>
    <option value="age">age</option>
  </select>
  <child-component :sorted-array="displayArray" />
</div>