Как обновить значение свойства данных в Vuejs?

Question

Я новичок в Vuejs и до сих пор не совсем ясно о vue системе реактивности. Здесь в следующем коде я пытаюсь обновить начальное значение переменной в свойстве данных, используя метод.

<script>
  name: "OrderDetails",
  data(){
    tax:5,
    subtotal:0
  },

  computed:{
    calculateSubtotal:()=> {
      let subtotal;

      -----some code--------

      this.subtotal = subtotal;
    }
  }
</script>

Но все же промежуточный итог остается 0. Как я могу обновить значение? Вот фрагмент кода https://codesandbox.io/s/affectionate-borg-384rl?file= / src / App. vue

Спасибо за продвижение.

Answer 1

В вашем коде есть несколько ошибок

1. Вы не должны использовать жирную стрелку при объявлении вычисляемых методов. this не будет привязываться к вашему экземпляру.

computed:{
  calculateSubtotal() {
      let subtotal;

      -----some code--------

   this.subtotal = subtotal;
  }
}

Ваши computed методы не должны иметь побочных эффектов. Это означает, что вы должны вычислять значения на основе data или внешней информации, но не обновлять данные изнутри метода. Вы должны вернуть желаемое значение.

computed:{
  calculateSubtotal() {
    let subtotal;

      -----some code--------

    return subtotal;
  }
}

Если вы никогда не ссылаетесь на computed method (вызовите его), он не будет выполнен. Вы нигде не звоните calculateSubtotal, и поэтому он никогда не запускается. Вам нужно позвонить куда-нибудь. Например, в шаблоне.

{{{calculateSubtotal}}

Вот пример с правильным this, возвращающим значение и вызывающим вычисляемый метод. Но вы не должны этого делать . Это приводит меня к № 4.

Вы должны просто использовать вычисляемый метод в качестве любых других данных и не передавать его в качестве параметров другим методам. Это будет работать и в methods.

Это полный пример