Как вывести записи модели в шаблоне?

Для вывода записей модели в шаблоне Vue.js требуется несколько шагов:

1. Создайте компонент, который будет отображать отдельную запись модели. В этом компоненте объявите свойства данных, которые будут представлять поля модели. Например, если у вас есть модель "Post" с полями "title" и "content", компонент может выглядеть следующим образом:

<template>
  <div>
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  props: ['post'],
}
</script>

2. В вашем основном компоненте, который будет отображать список записей модели, импортируйте компонент записи и объявите свойство данных, которое будет содержать список записей. Например:

<template>
  <div>
    <post v-for="post in posts" :post="post" :key="post.id" />
  </div>
</template>

<script>
import Post from './Post.vue';

export default {
  components: {
    Post
  },
  data() {
    return {
      posts: []
    };
  }
}
</script>

3. В методе created вашего основного компонента сделайте запрос к серверу или получите данные из другого источника данных и присвойте их свойству posts. Например, если вы используете HTTP запросы для получения данных с сервера, код может выглядеть следующим образом:

<script>
import Post from './Post.vue';
import axios from 'axios';

export default {
  components: {
    Post
  },
  data() {
    return {
      posts: []
    };
  },
  created() {
    axios.get('/api/posts')
      .then((response) => {
        this.posts = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  }
}
</script>

Теперь, когда вы передали список записей модели в компоненты "Post" и корректно настроили данные в основном компоненте, записи модели будут отображаться в шаблоне. Компонент "Post" будет отображаться для каждой отдельной записи в списке.