VueJS v-for：删除重复项

Question

是否有一个简单的解决方案可以用来从我的v-for循环中删除重复项，循环遍历 JSON 数据。

我正在使用它来填充 Select 选项，而不想导入https://lodash.com/docs#uniq

有问题的 Codepen：https : //codepen.io/anon/pen/JaZJmP?editors = 1010

谢谢

Answer 1

创建一个computed属性，该属性仅返回您想要/需要的数组中的那些项目。要从 中删除重复项info，您可以new Set(this.info.map(i=>i.title.rendered)使用[...new Set(this.map(i=>i.title.rendered))]以下方法将其解构回数组：

var vm = new Vue({
  el: "#wp-vue-app",
  data() {
    return {
      info: [{
          id: 1,
          status: "publish",
          link: "",
          title: {
            rendered: "Test Name One"
          },
          acf: {
            employee_details: {
              employee_name: "Test Name",
              employee_email: "Test-Email@email.co.uk",
              employee_number: "123",
              cost_centre_manager: "Manager Name",
              manager_email: "Manager-Email@email.co.uk"
            }
          }
        },
        {
          id: 2,
          status: "publish",
          link: "",
          title: {
            rendered: "Test Name"
          },
          acf: {
            employee_details: {
              employee_name: "Test Two Name",
              employee_email: "Test-Two-Email@email.co.uk",
              employee_number: "1234",
              cost_centre_manager: "Manager Two Name",
              manager_email: "Manager-Two-Email@email.co.uk"
            }
          }
        },
        {
          id: 3,
          status: "publish",
          link: "",
          title: {
            rendered: "Test Name"
          },
          acf: {
            employee_details: {
              employee_name: "Test Three Name",
              employee_email: "Test-Three-Email@email.co.uk",
              employee_number: "12345",
              cost_centre_manager: "Manager Three Name",
              manager_email: "Manager-Three-Email@email.co.uk"
            }
          }
        }
      ],
      loading: true,
      errored: false,
      emp_manager: "All",
      emp_cost_centre: "All"
    };
  },
  computed: {
    info_title: function() {
      return [...new Set(this.info.map(i => i.title.rendered))]
    },
    info_employee_name: function() {
      return [...new Set(this.info.map(i => i.acf.employee_details.employee_name))]
    },
  },
});

.container {
  padding: 20px;
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

label {
  display: block;
  line-height: 1.5em;
}

ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

li {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="wp-vue-app">

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    -
    <div class="row">
      <div class="col">
        <select class="form-control" v-model="emp_manager">
          <option>All</option>
          <option v-for="item in info_title" :value="item">{{ item }}</option>
        </select>
        <span>Selected: {{ emp_manager }}</span>
      </div>

      <div class="col">
        <select class="form-control" v-model="emp_cost_centre">
          <option>All</option>
          <option v-for="item in info_employee_name" :value="item">{{ item }}</option>
        </select>
        <span>Selected: {{ emp_cost_centre }}</span>
      </div>
    </div>

    <br />

  </section>

</div>

https://codepen.io/anon/pen/bxjpKG