Question

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

我用计算属性实现了这个：

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

但是，如果我有多个列表，我希望通过应用方法或过滤器来简化此过程？

我尝试使用方法但没有成功：

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

Answer 1

您的代码存在一些小错误，方法中有一个错误：randomList，您正在使用this.rand其中rand作为参数传递，因此您只需要访问它通过rand与this.rand一起查看vue实例数据，并会出现以下错误：

TypeError：this.rand未定义[了解更多]

请参阅工作小提琴here

<强>代码：

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

这里有一个拼写错误：el:'#vapp', =＆gt;这应该是el:'#app',

Answer 2

列表（数组）需要使用javascript随机化，它与 Vue.js 或randomList(myList)无关。

你的方法似乎是正确的。我还会创建一个方法来随机化像v-for这样的数组项，并直接在sort()中使用它。

但是不是使用具有随机true / false返回值的sort函数，而是有一个更好的实现来重新排列数组：How to randomize (shuffle) a JavaScript array?

如果您查看使用randomList()进行随机化的第三个答案（类似于您的尝试），您将会知道这是一种不正确的方法。（在评论中解释）

最顶层的答案有正确的方法，您可以将其插入methods: { randomList: function(array){ var currentIndex = array.length; var temporaryValue; var randomIndex; var myRandomizedList; // Clone the original array into myRandomizedList (shallow copy of array) myRandomizedList = array.slice(0) // Randomize elements within the myRandomizedList - the shallow copy of original array // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = myRandomizedList[currentIndex]; myRandomizedList[currentIndex] = myRandomizedList[randomIndex]; myRandomizedList[randomIndex] = temporaryValue; } // Return the new array that has been randomized return myRandomizedList; } }方法。以下是如何做到这一点（类似于该问题中接受的答案，但使用新数组，原始列表保持不变）：

getLaunchIntentForPackage

请注意：我没有测试过以上内容。它只是从最流行的答案中复制粘贴，作为一种方法包含在您的Vue组件中，之后进行必要的更改以随机化克隆的数组。

Vue.js适当的v-for循环的随机排序

2 个答案: