1

Необходимо передать в computed поле параметр - элемент из цикла те продукт. Результат вычисления поля записывать в v-if.

Если делать без computed, то v-if работает нормально. Происходит переключение кнопок, ошибок нет.

  1. без computed:

       <ul id="products">
                <li v-for="product in products">
                    <button v-if="inCart.indexOf(product.id) === -1"
                            v-on:click="addToCart(product.id)">Добавить в корзину</button>
                    <button v-else
                            v-on:click="removeFromCart(product.id)">Удалить из корзины</button>
                </li>
        </ul>
    

Но в общем случае удобнее использовать вычисляемое свойство.

Ошибка: "TypeError: _vm.status is not a function"

Использовать метод - не вариант, пересчет происходит для всех продуктов.

  1. с computed status:

    <ul id="products">
        <li v-for="product in products">
            <button v-if="status(product.id)"
                    v-on:click="addToCart(product.id)">Добавить в корзину</button>
            <button v-else
                    v-on:click="removeFromCart(product.id)">Удалить из корзины</button>
        </li>
    </ul>
    computed: {
        status(id){
            console.log(id);
            return this.inCart.indexOf(id) === -1
        },
        products(){...},
        inCart(){...}
    }
    
2
  • перенесите status в методы
    – Dmytro
    3 мар 2020 в 14:20
  • Если я перенесу status в методы, то кликнув по одной кнопке status сработает не единожды, а столько, сколько продуктов.
    – Tea
    3 мар 2020 в 14:29

1 ответ 1

0

Я бы сделал это так

var app = new Vue({
  el: "#app",
  data: {
    products: [{
        id: 0,
        in_cart: false,
      },
      {
        id: 1,
        in_cart: true,
      },
      {
        id: 2,
        in_cart: false,
      }
    ]
  },
  methods: {
    addToCart(id) {
      console.log('addToCart');
      this.products[id].in_cart = true

    },
    removeFromCart(id) {
      console.log('removeFromCart')
      this.products[id].in_cart = false
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <ul id="products">
    <li v-for="(product, index) in products" :key="product.id">
      <button v-if="!product.in_cart" @click="addToCart(index)">Добавить в корзину</button>
      <button v-else @click="removeFromCart(index)">Удалить из корзины</button>
    </li>
  </ul>
</div>

Потому что, если, сделать как Вы хотите, то проблема не будет решена

var app = new Vue({
  el: "#app",
  data: {
inCart: [],
products: [
  {
    id: 0,
  },
  {
    id: 1,
  },
  {
    id: 2,
  }
]
  },
  computed: {
status(){
    return (id) => {
      console.log(123)
      return this.inCart.indexOf(id) === -1
    }
},
  },
  methods: {
addToCart(id) {
  this.inCart.push(id)

},
removeFromCart(id){
  const index = this.inCart.indexOf(id);
  this.inCart.splice(index, 1)
}
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <div id="app">
  <ul id="products">
    <li v-for="product in products">
        <button v-if="status(product.id)"
                v-on:click="addToCart(product.id)">Добавить в корзину</button>
        <button v-else
                v-on:click="removeFromCart(product.id)">Удалить из корзины</button>
    </li>
</ul>
  </div>

2
  • Дело в том, что продукты и соответственно их id и тд. приходят из vuex. Те product и inCart это геттеры.
    – Tea
    3 мар 2020 в 17:19
  • и в чем проблема с геттерами?
    – Dmytro
    3 мар 2020 в 18:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.