компонент vue не рендерит данные, которые он получает из бэкенда


компонент vue не рендерит данные, которые он получает из бэкенда

09.11.2020 07:54:52 Просмотров 42 Источник

У меня есть очень простая HTML-страница с простым компонентом Vue. На вкладке Сеть я вижу, что он получает данные правильно, список, где он должен появиться, визуализируется, но данных просто нет.

    <div id="app">
      <h2>Total inventory: {{ totalProducts }}</h2>
      <ul>
        <li>beginning of the list</li>
        <li v-for="product in products">
          {{ product.name }} {{ product.price }}
        </li>
        <li>End of the list</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          products: []
        },
        created () {
          fetch('http://localhost:3000/api/teddies')
            .then(response => response.json())
            .then(json => {
              this.products = json.products
            })
        },
        computed () {
          return this.products.reduce((sum, product) => {
            return sum + product.quantity
          }, 0)
        }
      })
    </script>

Я попытался включить код скрипта в отдельный файл, используя axios для запроса (я знал, что это ничего не изменит, потому что запрос на самом деле уже работает), приписать идентификатор непосредственно списку и использовать его в скрипте... ничего не появилось вместо {{ product.name }} и {{ product. price }} . То же самое касается переменной totalProducts и {{ totalProducts }}

У вопроса есть решение - Посмотреть?

Ответы - компонент vue не рендерит данные, которые он получает из бэкенда / vue component not rendering the data it gets from the backend

Charlie

09.11.2020 08:01:54

Ваши данные должны возвращать функцию, которая возвращает новый объект:

Кратчайший путь

data: () => ({
   products: []
})

Длинный путь

data() {
  return {
    products: []
  }
}
Является ответом!
Boussadjra Brahim

09.11.2020 08:07:13

Назначьте json непосредственно this.products, как :

 fetch('https://fakestoreapi.com/products')
            .then(response => response.json())
            .then(json => {
              this.products = json           
            })

поскольку json представляет список products, то json.products вернет undefined

и вычисляемое свойство должно быть определено следующим образом :

computed:{
  comp1(){...},
 comp2(){...}
}

<div id="app">
  <h2>Total inventory: {{ totalProducts }}</h2>
  <ul>
    <li>beginning of the list</li>
    <li v-for="product in products">
      {{ product.title }} {{ product.price }}
    </li>
    <li>End of the list</li>
  </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {

      products: []

    },
    created() {
      fetch('https://fakestoreapi.com/products')
        .then(response => response.json())
        .then(prod => {

          this.products = prod
         
        })
    },
    computed: {
      totalProducts() {
        return this.products.reduce((sum, product) => {
          return sum + product.price
        }, 0)
      }
    }

  })
</script>

Помочь в развитии проекта:
Закрыть X