使用Vue.js在Laravel中产生随机数

Question

我是Vue.js的新手，而且很难生成随机数。在我的Vue文件中，脚本中包含以下代码：

var numeral = require("numeral");
Vue.filter("formatNumber", function(value)
{
    return numeral(value).format("0,0");
});

...调用方法：

getRandomNum()
    {
        this.like = Math.random() * 100;
        this.rate = Math.random() * 10;
        this.comment = Math.random() * 100;
    }

就像一个魅力一样工作，可在我的html中产生大量的喜欢，评价和评论：

但是，如果您注意到了，即使每当我刷新DOM时它们在某种意义上都是随机的，但从技术上讲，它们在每一行中都是相同的。我的问题是，有没有一种方法可以在每一行中产生完全不同的随机数？谢谢！请尊重，我是Vue.js的新手。

Answer 1

您反应性的数据属性是全局的，这意味着它们在全局数据范围内定义

data(){ return { likes: 0, rate: 0, comment: 0 } }

你必须使每个迭代元素（V-for循环）的成一个组件。并将相关数据传递给它。呈现时，它将唯一地完成。例如。

<div v-for="comment in comments"> <comment-component :comment="comments"></comment-component> </div>

在您的comment-component

中

<template id="comment-component">
<div id="box">
   <h3>{{comment.title}}</h3>
   <p>{{comment.description</p>
   <div>{{comment.date}} | {{getRandomNumber()}}</div>`
</template>
export default{
 data(){
  return {
    likes: 0,
    rate: 0,
    comment: 0
  }
 },
 methods: {
  getRandomNum()
  {
    this.like = Math.random() * 100;
    this.rate = Math.random() * 10;
    this.comment = Math.random() * 100;
  }
 },
 filters:{

 }

现在，当页面呈现时，它将独立处理集合中的每个项目。