Question

基本上，当我加载我的主页时，vue.js请求一个api，它返回一个像这样的json响应

[
  {
    "time": 321
  },
  {
    "time": 2712
  }
]

当请求加载完毕后，我将数组分配给vue.js文件中数据对象中的timers对象。

这是棘手的地方。所以基本上，当上面加载到vue中时，我需要每一个都用setInterval（）来递增。更糟糕的是，我需要为每个函数提供另一个回调，我可以暂停计时器，并向服务器发送另一个请求（暂停计时器服务器端）。有什么想法吗？

Answer 1

我最终创建了一个在文档加载时启动的新计时器。对于响应，我还添加了一个计数属性（布尔值）。

new Vue({
    el: "#body",

    data: {
        timers: [
            {
                time: 222,
                counting: true
            },
            {
                time: 4123,
                counting: true
            }
        ],
        test: 2
    },
    methods: {
        pauseTimer: function(timer) {
            timer.counting = !timer.counting;
        }
    },

    ready: function() {
        var that = this;
        var timer = setInterval(function(){
            $.each(that.$data.timers, function(index, value){
                if(value.counting)
                    value.time++;
            });
        }, 1000);
    }
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body id="body">
    <ul>
        <li v-repeat="timers">{{ time }} - <a href="#" v-on="click: pauseTimer(this)" v-text="counting ? 'Pause' : 'Start'"></a></li>
    </ul>
    {{ $data | json 2 }}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.js"></script>
    
</body>
</html>

在数据对象上运行函数

1 个答案: