使用Vue js 3从Laravel 9中的数据库获取数据

gorkyyrv 于 2023-01-31 发布在其他

关注(0)|答案(3)|浏览(186)

我想从数据库中读取数据并将其显示在应用程序中。
我是这么称呼它的：

<h2 class="lowongan1" v-for="value in list_lowongan"> {{ value.title }}</h2>
 <p class="descJob1" v-for="value in list_lowongan">{{ value.body }}</p>

剧本

export default {
  data() {
    return {
      'form': {
        title: '',
        body: '',
      },

      list_lowongan: []
    };
  },

    mounted() {
        console.log('on mounted');
        axios.get('post/list').then((response) => {
            console.log(response.data)
            this.list_lowongan = response.data
        }).catch((error) => {
            console.log(error)
        });
    },

问题是，当我这样调用它的时候，它会显示数据库中的所有标题和数据库表中的正文.
我怎样才能使它只显示一个标题为每个h2类？

laravel

来源：https://stackoverflow.com/questions/75293157/fetch-data-from-database-in-laravel-9-using-vue-js-3

3条答案

按热度按时间

vjrehmav1#

使用一个 Package div来保存内容，然后像这样在div上循环：

<div v-for="value in list_lowongan">
  <h2 class="lowongan1"> {{ value.title }}</h2>
  <p class="descJob1">{{ value.body }}</p>
</div>

赞(0）回复(0）举报 2023-01-31

u3r8eeie2#

有两个彼此独立的for循环，所以它们会自己堆叠
您只需要一个for循环来显示title和body在哪里
您可以按以下方式形成它：

<div v-for="value in list_lowongan">
    <h2>{{ value.title }}</h2>
    <p>{{ value.body }}</p>
</div>

赞(0）回复(0）举报 2023-01-31

kmynzznz3#

根据您的要求，不需要为相同的数据迭代使用多个v-for循环。相反，您可以通过在 Package 器元素中应用v-for，然后在该 Package 器元素中打印对象值来实现。
现场演示**：**

new Vue({
  el: '#app',
  data: {
    list_lowongan: []
  },
  mounted() {
    this.list_lowongan = [{
        title: 'Title 1',
      body: 'Body 1'
    }, {
        title: 'Title 2',
      body: 'Body 2'
    }, {
        title: 'Title 3',
      body: 'Body 3'
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(value, index) in list_lowongan" :key="index">
    <h2>{{ value.title }}</h2>
    <p>{{ value.body }}</p>
  </div>
</div>

赞(0）回复(0）举报 2023-01-31

我来回答

使用Vue js 3从Laravel 9中的数据库获取数据

3条答案

相关问题

热门标签

最新问答