Возврат данных с помощью методов Vue

Часто в веб-приложении мы хотим, чтобы элементы отображались на странице в зависимости от того, выполнено условие или нет. Например, если нашего продукта нет в наличии, наша страница должна отображать - что его нет в наличии. Итак, давайте разберемся, как мы условно визуализируем эти элементы в зависимости от того, есть ли наш товар на складе или нет.

Создайте и импортируйте компонент, как это сделано в упражнении.

Добавьте в тег script данные нашего магазина:

<script>
  export default {
    data(){
      return {
        totalCost: 0,
        totalItems: 0
      }
    }
  }
</script>

В разделе template мы отображаем значение totalItems и totalCost:

<template>
  <div>
    <h1>Returning Methods</h1>
    <div>Cart({{ totalItems }}) {{ totalCost }} </div>
  </div>
</template>

В разделе script давайте создадим метод addToCart, который будет обновлять totalCost и totalItems для текущего компонента на основе полученного числа, n, с помощью this.totalCost и this.totalItems:

<script>
  export default {
    data(){
      return {
        totalCost: 0,
        totalItems: 0
      }
    },
    methods: {
      addToCart(n) {
        this.totalItems = this.totalItems + 1
        this.totalCost = this.totalCost + n
      },
    },
  }
</script>

Давайте установим случайную сумму, чтобы создать кнопки для добавления количества в корзину - количество — это индекс кнопки. Затем мы привязываем метод addToCart к каждой кнопке с ее index в качестве входного аргумента функции:

<template>
  <div>
    <h1>Returning Methods</h1>
    <div>Cart({{ totalItems }}) {{ totalCost }} </div>
    <ul>
      <li v-for="n in 5" :key="n">
        <button @click="addToCart(n)">Add {{ n }}</button>
      </li>
    </ul>
  </div>
</template>

Добавьте стили:

<style>
button {
  margin: 10px;
}
</style>

Когда вы нажимаете на кнопки, счетчик totalItems должен увеличиваться на 1, но totalCost будет увеличиваться на значение n, что должно демонстрировать
нормальный функционал корзины.

Теперь давайте отформатируем totalCost. Создайте метод с именем formatCurrency, который принимает
один аргумент. Мы вернем то же значение после добавления двух знаков после запятой и символа $:

<script>
  export default {
    data() {
     /*…*/
  },
  methods: {
    addToCart(n) { /*…*/},
    formatCurrency(val) {
      return `$${val.toFixed(2)}`
    },
  },
}
</script>

Чтобы использовать этот метод в template, добавьте его в фигурные скобки и передайте значение, которое которое метод должен будет отработать:

<template>
  <div>
    <h1>Returning Methods</h1>
    <div>Cart({{ totalItems }}) {{formatCurrency(totalCost) }}</div>
    <ul>
      <li v-for="n in 5" :key="n">
        <button @click="addToCart(n)">Add {{formatCurrency(n) }}</button>
      </li>
    </ul>
</div>
</template>

В этом упражнении мы смогли использовать Vueметоды для анализа аргументов которые передаются в эти методы, возвращать измененные значения и использовать методы для обновления локального состояния внутри data.
В следующем разделе мы рассмотрим важную часть компонента —жизненный цикл и доступные хуки компонентов в Vue.