Vue warn - Невозможно использовать оператор «in» для поиска «[массив объектов]»

1

Что ж,

Я пытаюсь сделать проект корзины с vue.js, и в консоли браузера отображается эта ошибка:

vue.common.js: 576 [Vue warn]: Ошибка в созданном крюке: "TypeError: не может использовать" в "для поиска" [объекта Array] "в продуктах"

// App.vue

<template>
  <div class="container">
      <div class="products">
        <div class="clearfix">
          <product v-for="product in products" :key="product"></product>
        </div>
      </div>
      <div class="shopping-cart">
        <shopping-cart></shopping-cart>
      </div>
  </div>
</template>

<script>

import ShoppingCart from './components/ShoppingCart.vue'
import Product from './components/Product.vue'

export default {
  created () {
    // dados mockados
    var dummy = [
      {id: 1, title: 'Name of Product 1', price: 40, image: 'product.png'},
      {id: 2, title: 'Name of Product 2', price: 90, image: 'product.png'},
      {id: 3, title: 'Name of Product 3', price: 10, image: 'product.png'},
      {id: 4, title: 'Name of Product 4', price: 20, image: 'product.png'}
    ];

    this.$set('products', dummy)
  },
  data () {
    return {
      products: []
    }
  },
  components: { Product, ShoppingCart }
}

</script>

Что я могу сделать?

Я много пробовал и все еще без успеха = (

  • 0
    Вставьте в массив product вместо $ set this.products.push({id: 1, title: 'Name of Product 1', price: 40, image: 'product.png'}, { the others })
Теги:
vue.js

3 ответа

3

Прежде всего, имя компонента в шаблоне является "продуктом", а также ключом для цикла является также "продукт". Или вы меняете имя компонента на подходящее имя.

И вы, должно быть, забыли указать имя (присвоить имя компонента для tepmplate) компоненту, который вы импортировали. Вы не можете использовать импортированный компонент так же, как это, не указывая ему имя ссылки, чтобы использовать его в шаблоне.

components: { Product:productName, ShoppingCart: shoppingCart }

Таким образом, вы используете <product-name> </product-name> в шаблоне, и поэтому после этого в цикле for будет работать product in prodcuts.

Также массив продуктов не должен работать таким образом. Он должен быть рассчитан на крючок.

computed ={}

Или я должен предлагать вам непосредственно сопоставить его с data()

Поделиться
1

для лучшей работы, в методе $ set в VUE

первый аргумент для передачи этого "ключевого слова"

что-то вроде этого

this.$set(this,'your_object', value)

и заметить, что второй arg должен быть String

Поделиться
0

Я думаю, проблема связана с методом $ set, вам нужно указать объект как 1-й параметр, см. Полный документ здесь

поэтому вам нужно сделать что-то вроде этого: this.$set(this.products, dummy) и это не даст вам 4 продуктов в цикле v-for. Я бы предложил назначить продукты непосредственно в data()

Поделиться
  • 0
    Я использовал это: this. $ Set (this.products, 'products', dummy) и работал только для одного продукта, как вы сказали. Как я могу сделать цикл v-for работает ??? Спасибо за поддержку!
  • 0
    Лучший способ - напрямую назначить массив в функции data () без фиктивной переменной. Другой способ - использовать Object.assign, например: Object.assign(this.products, dummy)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню