In Vue, we often need to perform loop operations and match incoming parameters. This article will introduce you how to loop matching parameters in Vue.

Step 1: Define the component

First, we need to define a Vue component. Here we take the list component as an example. The code is as follows:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    listData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      items: [],
    };
  },
  created() {
    this.items = this.listData;
  },
};
</script>

This component receives an array parameter named listData and assigns it to items for display. In the component, we can use Vue's directive v-for to loop through rendering list data, and :key to optimize performance and eliminate warnings.

Step 2: Pass in parameters

Next, we need to pass in parameters in the Vue instance. The code is as follows:

<template>
  <div>
    <List :listData="data" />
  </div>
</template>

<script>
import List from "@/components/List";

export default {
  name: "App",
  components: {
    List,
  },
  data() {
    return {
      data: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
      ],
    };
  },
};
</script>

In the Vue instance, we introduce the List component through import and pass the data array as a parameter to ## The listData property of the #List component.

created life cycle. The code is as follows:

<template>
  <div>
    <List :listData="data" search="Banana" />
  </div>
</template>

<script>
import List from "@/components/List";

export default {
  name: "App",
  components: {
    List,
  },
  data() {
    return {
      data: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
      ],
    };
  },
};
</script>

List component, we add a search item search and pass Banana as parameters.

created life cycle of the List component, we will use the filter method to loop and match the incoming parameters. The specific code is as follows:

<script>
export default {
  name: "List",
  props: {
    listData: {
      type: Array,
      required: true,
    },
    search: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      items: [],
    };
  },
  created() {
    this.items = this.listData.filter((item) =>
      item.name.includes(this.search)
    );
  },
};
</script>

filter method. By passing in a function, we can filter out the array items that meet the conditions. Here, we determine whether the name attribute of the array item contains the incoming search parameter. If it meets the conditions, we add it to the items array. Ultimately, we will only display list items that meet the criteria.

The above is the detailed content of How to loop matching parameters in vue. For more information, please follow other related articles on the PHP Chinese website!