Question

我的问题是显示对象的值。该表显示了任务和剩余的完成时间。但它不会更新倒数计时器... 值位于任务ID中的对象中，例如：对象{1：“ 4017 D 13 H 2 M 49 S”，2：“ 0 D 0 H 0 M 0 S”，...} 应该始终更新该对象以显示剩余时间，但是在显示该对象的表中，该对象仅具有第一个值，而没有更新计时器。

 <template>
    ...
     <table class="table" style="text-align: center">
      <thead>
       <tr>
        <th scope="col">...</th>
        <th scope="col">...</th>
        <th scope="col">...</th>
        <th scope="col">...</th>
        <th scope="col">Time Left</th>
       </tr>
      </thead>
      <tbody>
       <tr class="table-warning" v-for="task in tasks" :key="task.id">
        <th scope="row">{{task.id}}</th>
        <th>{{task.description}}</th>
        <th>{{task.created_at}}</th>
        <th>{{task.redline}}</th>
        <th>{{showLeft[task.id]}}</th>
     </tbody>
    </table>
    ...
    </template>

<script>
export default {
// variables declaration
  data() {
    return {
      user: [],
      tasks: [],
      numTasks: "",
      currentTime: [],
      showLeft: {}
    };
  },

  created() {
   // ProgressBar animation starts
    this.$Progress.start();
   // Get data from server
    axios.get("/user/name/data").then(response => {
      this.user = response.data;
      axios.get(`/user/missingTaskNum/data`).then(response => {
        this.numTasks = response.data;
        axios.get(`/user/missingTask/data`).then(response => {
          this.tasks = response.data;

          // Call function that will calculate time left
          this.updateCurrentTime();

         // ProgressBar animation stops
          this.$Progress.finish();
        });
      });
    });
  },

  mounted() {
   // start timer to refresh function every 1 sec
    this.interval = setInterval(() => {

      this.updateCurrentTime();

    }, 1000);
  },

  methods: {

    updateCurrentTime: function() {

      var now = new Date().getTime();

      for (let i = 0; i < this.tasks.length; i++) {

        this.currentTime[this.tasks[i].id] = new Date(this.tasks[i].redline) - now;

        if (this.currentTime[this.tasks[i].id] < 0) {

          this.$Progress.start();

          this.$Progress.finish();

          console.log("EXPIROU ID: " + this.tasks[i].id);

        } else {

          var days = Math.floor(
            this.currentTime[this.tasks[i].id] / (1000 * 60 * 60 * 24)
          );

          var hours = Math.floor(
            (this.currentTime[this.tasks[i].id] % (1000 * 60 * 60 * 24)) /
              (1000 * 60 * 60)
          );

          var minutes = Math.floor(
            (this.currentTime[this.tasks[i].id] % (1000 * 60 * 60)) /
              (1000 * 60)
          );

          var seconds = Math.floor(
            (this.currentTime[this.tasks[i].id] % (1000 * 60)) / 1000
          );

          this.showLeft[this.tasks[i].id] =
            days + " D " + hours + " H " + minutes + " M " + seconds + " S ";
        }
      }
      console.log(this.showLeft);
    }
  },

  beforeDestroy() {
    clearInterval(this.interval);
  }
};

</script>

Answer 1

您遇到了变更检测警告之一，概述如下：

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

具体在这一行：

$(document).ready(function() {
  if ($('input[name="checkbox1"]').prop("checked") == true) {
    displayVals1();
  }
  if ($('input[name="checkbox2"]').prop("checked") == true) {
    displayVals2();
  }
});
$('input[name="checkbox1"]').click(function() {
  $('input[name="checkbox2"]').prop('checked', false);
});
$('input[name="checkbox2"]').click(function() {
  $('input[name="checkbox1"]').prop('checked', false);
});
$('input[name="checkbox5"]').click(function() {
  $('input[name="checkbox6"]').prop('checked', false);
});
$('input[name="checkbox6"]').click(function() {
  $('input[name="checkbox5"]').prop('checked', false);
});
$("#qr1").change(function() {

  //$("#qr1").prop('disabled', true);
  //$("#qr2").prop('disabled', false);
});
$("#qr2").change(function() {
  //$("#qr2").prop('disabled', true);
  //$("#qr1").prop('disabled', false);
});
$("#qr5").change(function() {
  $("#qr5").prop('disabled', true);
  $("#qr6").prop('disabled', false);
});
$("#qr6").change(function() {
  $("#qr6").prop('disabled', true);
  $("#qr5").prop('disabled', false);
});

function displayVals1() {
  Calculate1();
  var extras11 = 0;
  var extras12 = 0;
  var extra11a = 0;
  var extra12a = 0;
  var extra13a = 0;
  var extra14a = 0;
  var extra11b = 0;
  var extra12b = 0;
  var extra13b = 0;
  var extra14b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo1 = $('input[id="qr1"]').val();
  var total11 = 0;
  var kms11 = 0;
  var fullTot11 = 0;
  var fullTot12 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1a = $("input[name='checkbox3']").val();
    extra11a = parseInt(extra1a) * parseInt(Multiplier);
    extra11b = parseInt(extra1a);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2a = $("input[name='checkbox4']").val();
    extra12a = parseInt(extra2a) * parseInt(Multiplier);
    extra12b = parseInt(extra2a);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3a = $("input[name='checkbox5']").val();
    extra13a = parseInt(extra3a) * parseInt(Multiplier);
    extra13b = parseInt(extra3a);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4a = $("input[name='checkbox6']").val();
    extra14a = parseInt(extra4a) * parseInt(Multiplier);
    extra14b = parseInt(extra4a);
  }
  extras11 = parseInt(extra11b) + parseInt(extra12b) + parseInt(extra13b) + parseInt(extra14b);
  extras12 = parseInt(extra11a) + parseInt(extra12a) + parseInt(extra13a) + parseInt(extra14a);
  total11 = parseInt(extras12);
  kms11 = parseInt(Multiplier) * parseInt(kilo1);
  fullTot11 = parseInt(total11) + parseInt(kms11);
  fullTot12 = parseInt(extras11) + parseInt(kilo1);
  $("#pricef1").val(fullTot12);
  $("#pricef2").val(fullTot11);
}

function Calculate1() {
  var extras21 = 0;
  var extras22 = 0;
  var extra21a = 0;
  var extra22a = 0;
  var extra23a = 0;
  var extra24a = 0;
  var extra21b = 0;
  var extra22b = 0;
  var extra23b = 0;
  var extra24b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo1 = $('input[id="qr1"]').val();
  var fullTot21 = 0;
  var fullTot22 = 0;
  var total21 = 0;
  var kms21 = 0;
  var total22 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1b = $("input[name='checkbox3']").val();
    extra21a = parseInt(extra1b) * parseInt(Multiplier);
    extra21b1b = parseInt(extra1b);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2b = $("input[name='checkbox4']").val();
    extra22a = parseInt(extra2b) * parseInt(Multiplier);
    extra22b = parseInt(extra2b);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3b = $("input[name='checkbox5']").val();
    extra23a = parseInt(extra3b) * parseInt(Multiplier);
    extra23b = parseInt(extra3b);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4b = $("input[name='checkbox6']").val();
    extra24a = parseInt(extra4b) * parseInt(Multiplier);
    extra24b = parseInt(extra4b);
  }
  extras21 = parseInt(extra21a) + parseInt(extra22a) + parseInt(extra23a) + parseInt(extra24a);
  extras22 = parseInt(extra21b) + parseInt(extra22b) + parseInt(extra22b) + parseInt(extra22b);

  total21 = parseInt(extras21);
  kms21 = parseInt(Multiplier) * parseInt(kilo1);
  fullTot21 = parseInt(total21) + parseInt(kms21);
  fullTot22 = parseInt(kilo1) + parseInt(extras22);

  $("#usertotal").text('R ' + fullTot21 + '/day');
  $("#userdaily").text('R ' + fullTot22 + '/day');
}

function displayVals2() {
  Calculate2();
  var extras31 = 0;
  var extras32 = 0;
  var extra31a = 0;
  var extra32a = 0;
  var extra33a = 0;
  var extra34a = 0;
  var extra31b = 0;
  var extra32b = 0;
  var extra33b = 0;
  var extra34b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo2 = $('input[id="qr2"]').val();
  var total31 = 0;
  var kms31 = 0;
  var fullTot31 = 0;
  var fullTot32 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1c = $("input[name='checkbox3']").val();
    extra31a = parseInt(extra1c) * parseInt(Multiplier);
    extra31b = parseInt(extra1c);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2c = $("input[name='checkbox4']").val();
    extra32a = parseInt(extra2c) * parseInt(Multiplier);
    extra32b = parseInt(extra2c);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3c = $("input[name='checkbox5']").val();
    extra33a = parseInt(extra3c) * parseInt(Multiplier);
    extra33b = parseInt(extra3c);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4c = $("input[name='checkbox6']").val();
    extra34a = parseInt(extra4c) * parseInt(Multiplier);
    extra34b = parseInt(extra4c);
  }
  extras31 = parseInt(extra31a) + parseInt(extra32a) + parseInt(extra33a) + parseInt(extra34a);
  extras32 = parseInt(extra31b) + parseInt(extra32b) + parseInt(extra33b) + parseInt(extra34b);
  total31 = parseInt(extras31);
  kms31 = parseInt(Multiplier) * parseInt(kilo2);
  fullTot31 = parseInt(extras32) + parseInt(kilo2);
  fullTot32 = parseInt(total31) + parseInt(kms31);

  $("#pricef1").val(fullTot31);
  $("#pricef2").val(fullTot32);
}

function Calculate2() {
  var extras41 = 0;
  var extras42 = 0;
  var extra41a = 0;
  var extra42a = 0;
  var extra43a = 0;
  var extra44a = 0;
  var extra41b = 0;
  var extra42b = 0;
  var extra43b = 0;
  var extra44b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo2 = $('input[id="qr2"]').val();
  var fullTot41 = 0;
  var fullTot42 = 0;
  var total41 = 0;
  var kms41 = 0;
  var total42 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1d = $("input[name='checkbox3']").val();
    extra41a = parseInt(extra1d) * parseInt(Multiplier);
    extra41b = parseInt(extra1d);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2d = $("input[name='checkbox4']").val();
    extra42a = parseInt(extra2d) * parseInt(Multiplier);
    extra42b = parseInt(extra2d);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3d = $("input[name='checkbox5']").val();
    extra43a = parseInt(extra3d) * parseInt(Multiplier);
    extra43b = parseInt(extra3d);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4d = $("input[name='checkbox6']").val();
    extra44a = parseInt(extra4d) * parseInt(Multiplier);
    extra44b = parseInt(extra4d);
  }
  extras41 = parseInt(extra41a) + parseInt(extra42a) + parseInt(extra43a) + parseInt(extra44a);
  extras42 = parseInt(extra41b) + parseInt(extra42b) + parseInt(extra42b) + parseInt(extra42b);

  total41 = parseInt(extras41);
  kms41 = parseInt(Multiplier) * parseInt(kilo2);
  fullTot41 = parseInt(total41) + parseInt(kms41);
  fullTot42 = parseInt(kilo2) + parseInt(extras42);

  $("#usertotal").text('R ' + fullTot41 + '/day');
  $("#userdaily").text('R ' + fullTot42 + '/day');
}
$("#qr1").click(function() {
  displayVals1();
});
$("#qr2").click(function() {
  displayVals2();
});
$('input[name="checkbox3"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox4"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox5"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox6"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});

在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="mySelect">No. Days</label> <select name="mySelect" id="mySelect"> <option name="one" value="1">1</option> <option name="two" value="2">2</option> <option name="three" value="3">3</option> <option name="four" value="4">4</option> <option name="five" value="5" selected>5</option> </select><br><br> <label for="checkbox1">100kms</label> <input type="radio" name="checkbox1" class="kilo" value="125" id="qr1" checked><br><br> <label for="checkbox1">200kms</label> <input type="radio" name="checkbox1" class="kilo" value="225" id="qr2"><br><br> <label for="checkbox3">Tyre</label> <input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br> <label for="checkbox4">Glass</label> <input type="checkbox" name="checkbox4" value="20" id="qr4"><br><br> <label for="checkbox5">General</label> <input type="checkbox" name="checkbox5" value="60" id="qr5" checked><br><br> <label for="checkbox6">Third Party</label> <input type="checkbox" name="checkbox6" value="80" id="qr6"><br><br> Daily :<span id="userdaily"> </span><br><br> Total :<span id="usertotal"> </span><br><br> <input tyep="text" id="pricef1" name="pricef1" value=""> <input tyep="text" id="pricef2" name="pricef2" value="">中创建对象this.showLeft[this.tasks[i].id] = days + " D " + hours + " H " + minutes + " M " + seconds + " S ";时为空，因此它没有任何反应特性。如果将其更改为此，它会很好地工作：

this.showLeft

这告诉Vue向data添加反应性属性，以便UI在更改时会更新。

一种替代方法是每次创建一个新对象：

this.$set(
    this.showLeft,
    this.tasks[i].id,
    days + " D " + hours + " H " + minutes + " M " + seconds + " S "
)

我个人认为，我将为此更多地使用计算属性，而不是尝试在showLeft内进行所有操作。鉴于代码不完整，我无法更加具体。

如何显示数组中的刷新值

1 个答案: