Vue.js 正确随机排序 v-for 循环 [英] Vue.js proper random ordering of v-for loop

问题描述

有一个我想以随机顺序输出的列表.

我通过计算属性实现了这一点:

<ul><li v-for="list in randomList" >{{ 列表.文本 }}
<脚本>var vm = new Vue({el:'#app',数据:{列表:[{text:'js',value:'one'},{text:'css',value:'two'},{文本:'html'，值:'三'}]},计算:{随机列表:函数(){return this.lists.sort(function(){return 0.5 - Math.random()});}}});

但如果我有多个列表，我想通过应用方法或过滤器来简化这个过程?

我尝试了一些方法但没有成功:

<ul><li v-for="list in randomList(lists)" >{{ 列表.文本 }}<ul><li v-for="name in randomList(names)" >{{ 名称.文本 }}
<脚本>var vm = new Vue({el:'#app',数据:{列表:[{text:'js',value:'one'},{text:'css',value:'two'},{文本:'html'，值:'三'}],姓名:[{text:'mary',value:'one'},{text:'css',value:'two'},{文本:'html'，值:'三'}]},方法: {随机列表:函数(兰特){return this.rand.sort(function(){return 0.5 - Math.random()});}}});

解决方案

你的代码有几个小错误，一个错误是你的方法:randomList，你正在使用 this.rand 其中 rand 作为参数传递，因此您只需要通过 rand 访问它，使用 this.rand 它将看起来进入vue实例数据，会报错:

<块引用>

类型错误:this.rand 未定义[了解更多]

查看工作小提琴 此处

代码:

 方法:{随机列表:函数(兰特){return rand.sort(function(){return 0.5 - Math.random()});}}

你在这里有一个错字:el:'#vapp', => 这应该是 el:'#app',

Have a list that i want to output in random order.

I achieved this with computed property:

<div id="app">

  <ul>
    <li v-for="list in randomList" >
      {{ list.text }}
    </li>
  </ul>

</div> 

<script>
      var vm = new Vue({


      el:'#app', 
      data:{
        lists:[
          {text:'js',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ]
      },

      computed: {
        randomList: function(){
          return this.lists.sort(function(){return 0.5 - Math.random()});
        }
      }

    });
 </script>

But if i have more than one list i that want to simplify this process by applying methods or filters?

I tried with methods without success:

<div id="app">

  <ul>
    <li v-for="list in randomList(lists)" >
      {{ list.text }}
    </li>
  </ul>
   <ul>
     <li v-for="name in randomList(names)" >
     {{ name.text }}
    </li>
  </ul>


</div> 
<script>
      var vm = new Vue({


      el:'#app', 
      data:{
        lists:[
          {text:'js',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ],
        names:[
          {text:'mary',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ]
      },

      methods: {
        randomList: function(rand){
          return this.rand.sort(function(){return 0.5 - Math.random()});
        }
      }

    });
 </script>

解决方案

There are few minor errors with your code, One error is in your method: randomList, you are using this.rand where rand is passed as parameter, so you just need to access it via rand, with this.rand it will look into vue instance data and will give following error:

TypeError: this.rand is undefined[Learn More]

See working fiddle here

Code:

  methods: {
    randomList: function(rand){
      return rand.sort(function(){return 0.5 - Math.random()});
    }
  }

You have one typo here: el:'#vapp', => this shoud be el:'#app',

这篇关于Vue.js 正确随机排序 v-for 循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！