Выводится массив во vue

Question

Выводится массив при попытке запроса в Backend который написан на node.js, тем самым не могу вывести определённое значение, подскажите в чём ошибка?

Код frontend:

<template>
  <div class="list" v-for="product in listProducts" >
    <p>{{ product }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return{
      listProducts: []
    }
  },
  mounted(){
    fetch('http://localhost:5000/api/product')
    .then(response => response.json())
    .then(json => this.listProducts = json)
  },
}
</script>

<style>
  body{
    background: #333;
    text-align: center;
  }
  h1, h5, p{
    color: #fff;
  }
</style>

результат:

Answer 1

Если вы используете vue 2.*, то вероятно должны получить предупреждение:

Error: Multiple root nodes returned from render function. Render function should return a single root node.

Это значит, что вам нужно обернуть элемент, на котором используете директиву v-for в, допустим, div, чтобы в вашем компоненте был один корневой элемент.

Пример для версии vue 2

const todos = Vue.component('todos', {

  data() {
    return {
      listProducts: []
    }
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/todos?_limit=30')
      .then(response => response.json())
      .then(json => this.listProducts = json)
  },
  template: `
  <div>
  <div class="list" v-for="product in listProducts" >
    <p>{{ product }}</p>
  </div>
  </div>
  `
})

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <todos></todos>
</div>

В версии vue 3 были добавлены фрагменты:

В 3.x компоненты теперь могут иметь несколько корневых узлов! Однако это требует от разработчиков явного определения, где должны быть распределены атрибуты. 3.x Синтаксис

const app = Vue.createApp({})

app.component('todos', {
  data() {
    return {
      listProducts: []
    }
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/todos?_limit=30')
      .then(response => response.json())
      .then(json => this.listProducts = json)
  },
  template: `
  <div class="list" v-for="product in listProducts">
    <p>{{ product }}</p>
  </div>
  `
})

app.mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <todos></todos>
</div>

БЛОГ НА HUSL

Выводится массив во vue

Ответы (1 шт):