How to loop matching parameters in vue

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.

Step 3: Loop matching parameters

Now, we have successfully passed the parameters to the component and rendered the data list. If we need to loop to match the incoming parameters, we can do it in the

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>

In the template of the Vue instance, when we use the

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

Next, in the

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>

In this code, we use the JavaScript array

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.

So far, we have successfully implemented the function of loop matching parameters in Vue. In actual development, we can also use similar methods to develop components according to needs, improve development efficiency and enhance user experience.

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!