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

Posted 2023-02-23

【中文标题】vue onclick 对父组件中的子组件进行排序

【英文标题】：Vue onclick sort child component in parent component

【发布时间】：2020-10-29 01:20:37

【问题描述】：

我正在使用 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 函数，当我单击按名称排序时，我可以在父级中使用该函数以按字母顺序显示用户个人资料卡。

非常感谢！

【参考方案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 

【讨论】：

谢谢！我尝试使用道具进行此操作，并且数据正在传递，但由于某种原因，@click 无法正常工作。我尝试做一个 console.log 但似乎没有显示

您是否定义了类似@click="sortArray" 的事件。没有sortArray()。

我只是改成那个，但似乎仍然没有显示任何内容

你能把你的代码贴在codesandbox里让我明白真正的问题吗？

当然codesandbox.io/s/magical-curran-u0kr2?file=/package.json 但似乎我无法将事件绑定到选项***.com/questions/46260052/…

【参考方案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；

【讨论】：

谢谢！所以我应该添加布尔值并修改子组件中的计算？并在父项中添加 this.showSorted？

是的，我会在父级中使用 showSorted 并将其值传递给子级。

感谢您的帮助！

【参考方案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>