js如何检查数组中的两个对象值是否在一起

Question

如果我有数组：let messages = [  {    username: 'john',    message: 'hi'  },  {    username: 'john',    message: 'there'  },  {    username: 'bob',    message: 'hello'  },  {    username: 'john',    message: 'whats up'  }]如果我有这样的消息：在 vuejs 渲染中，我将如何组合具有相同用户名的消息并将文本呈现在彼此之下？

Answer 1

不要在视图中使用它，使用 acomputed来获取您想要的数据。然后您可以使用<template>标签来控制显示哪些元素，这样您就不需要将元素包装到单个 DOM 元素中。

computed下面是一个示例，它显示了为然后可以迭代的数组生成数组的直接方法。

Vue.createApp({

  data() {

    return {

      messages: [{

          username: 'john',

          message: 'hi'

        },

        {

          username: 'john',

          message: 'there'

        },

        {

          username: 'bob',

          message: 'hello'

        },

        {

          username: 'john',

          message: 'whats up'

        }

      ]

    }

  },

  computed: {

    byUser() {

      const arr = [];

      let tempName = null;

      let tempGroup = {}

      this.messages.forEach(m => {

        if (tempName !== m.username) {

          tempGroup = {

            username: m.username,

            messages: []

          }

          arr.push(tempGroup);

        }

        tempGroup.messages.push(m.message);

        tempName = m.username;

      })

      return arr;

    }

  }

}).mount("#app")

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app" class="container">

  <template v-for="(m, i) in byUser">

    <h2>

      {{ m.username }}

    </h2>

    

    <p v-for="message in m.messages">

      {{ message }}

    </p>

    

    <hr>

  </template>

</div>