运行数据对象上的函数

Question

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

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

请求完成加载后，我将数组分配给 vue.js 文件中数据对象中的计时器对象。

这就是它变得棘手的地方。所以基本上，当上面加载到 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>

运行 数据对象上的函数

Running functions on a data object

vue.js

运行数据对象上的函数