代码之家 › 专栏 › 技术社区 › wbdlc

VueJS v-for:删除重复项

vuejs2 vue.js json arrays

-1

wbdlc · 技术社区 · 7 年前

有没有一个简单的解决方案,我可以用来消除重复从我的 v-for 在JSON数据中循环的循环。

我用它来填充一个Select选项,而不是导入 https://lodash.com/docs#uniq

https://codepen.io/anon/pen/JaZJmP?editors=1010

谢谢

2 回复 | 直到 7 年前

connexo 7 年前

创建 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

Husam Ibrahim 7 年前

您可以使用computed属性来过滤您的信息(比如filteredInfo)。然后对filteredInfo属性使用v-for。