Javascript 使用vue js显示聊天列表卡的循环

我正在做一个聊天室。。。我需要显示聊天站的数组。。我可以检索数据，卡正在循环，但我需要排成一行显示它的聊天标题。。有人能帮我吗

我的会话组件

<template>
    <div class="row w-100">
        <div class="card" v-for="conversation in conversations" :key="i">
            <div class="card-body">
                <h5 class="card-title">Card name </h5>
                <p class="card-text">Last Chat </p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['conversation_index_route'],
    data() {
        return {
            conversations: []
        }
    },
    mounted() {
        this.getConversations();
    },
    methods: {
        getConversations: function() {
            let self = this;
            axios.get(this.conversation_index_route)
                .then(response => {
                    self.conversations = response.data.data;
                })
        }
    }
}
</script>

---

如果您想在对话数组上循环，请将其添加到您的内部元素中

<div class="card" v-for="conversation in conversations" :key="i">
  <div class="card-body">
    <h5 class="card-title"> {{ conversation.title }} </h5>
    <p class="card-text"> {{ conversation.latest }} </p>
    <p class="card-text"><small class="text-muted"> {{ conversation.updated_at || computeAgo }} </small></p>
  </div>
</div>

{{conversation.title}}
{{conversation.latest}
{{{conversation.updated_at| | | computeAgo}

---

请注意，上面的

updated_at

函数不执行必须执行的操作。您应该为它创建一个类似于

computeAgo

的过滤器，然后使用

Date（）

精确计算几分钟前的时间

您是在努力添加

标题

还是将其显示在一行中？

<div class="card" v-for="conversation in conversations" :key="i">
  <div class="card-body">
    <h5 class="card-title"> {{ conversation.title }} </h5>
    <p class="card-text"> {{ conversation.latest }} </p>
    <p class="card-text"><small class="text-muted"> {{ conversation.updated_at || computeAgo }} </small></p>
  </div>
</div>