VueJS v-for: удалить дубликаты

Question

Есть ли простое решение, которое я могу использовать для удаления дубликатов из моего цикла v-for, который перебирает данные JSON.

Я использую это, чтобы заполнить опцию выбора, и не хотел бы импортировать 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

Answer 2

Вы можете использовать вычисленное свойство для фильтрации вашей информации (скажем, FilterInfo). Затем используйте v-for для свойства FilterInfo.