无法设置未定义的属性“运行”

时间:2019-12-01 09:53:18

标签: javascript html twitter-bootstrap vue.js nuxt

我正在使用Nuxt.js,但在读取我的 client 对象的 running 属性时遇到了这个问题。

HTML:

<b-button
  v-show="!(projectSelecter(project.ID)).isStarted"  //this work just fine
  variant="success"
  class="control_buttons"
  @click="start(project.ID)"
>Start</b-button>

JS:

start: function(id) {
  const client=this.projectSelecter(id);
  console.log("ID: ", id);
  console.log("Client: ", client);
  console.log("Client running property: ", client.running);
  //if (client.running) return;

  if (client.timeBegan === null) {
    this.reset();
    client.timeBegan = new Date();
  }

  if (client.timeStopped !== null) {
    client.stoppedDuration += new Date() - client.timeStopped;
  }

  client.isStarted=!client.isStarted;
  client.started = setInterval(this.clockRunning, 10);
  client.running = true;
},

这是重置功能,在上面的启动功能中被调用。

reset: function(id) {
  var client=this.projectSelecter(id);
  client.running = false;
  clearInterval(client.started);
  client.stoppedDuration = 0;
  client.timeBegan = null;
  client.timeStopped = null;
  client.time = "00:00";
  client.isStarted=false;
}

控制台日志:

enter image description here

错误消息:

enter image description here

完整:

enter image description here

1 个答案:

答案 0 :(得分:1)

在您的reset方法中, 您需要在启动方法中传递id作为参数。 所以您的启动方法应该像

start: function(id) {
  const client=this.projectSelecter(id);
  console.log("ID: ", id);
  console.log("Client: ", client);
  console.log("Client running property: ", client.running);
  //if (client.running) return;

  if (client.timeBegan === null) {
    this.reset(id); //passing `id` to reset method
    client.timeBegan = new Date();
  }

  if (client.timeStopped !== null) {
    client.stoppedDuration += new Date() - client.timeStopped;
  }

  client.isStarted=!client.isStarted;
  client.started = setInterval(this.clockRunning, 10);
  client.running = true;
},