Setting up a variable within a v-for iteration in Vue JS

Question

Setting up a variable within a v-for iteration in Vue JS

I'm currently facing a challenge in finding a solution to what appears to be a simple problem.

Within a template, I am using a v-for loop to generate some content. In this content, I need to execute a function to check if the contentID matches an ID from a separate list. If there is a match, I need to display that data within my loop. However, the current method involves running the function multiple times, as shown below:

methods: {
findClientName (clientId) {
  for (let name of this.clientList) {
    if (name.id == clientId) {
      return {
        name
      }
    }
  }
}

<v-card-text>
    {{ findClientName(item.client_id).name.f_name }}
    {{ findClientName(item.client_id).name.l_name }}
</v-card-text>

It feels inefficient to call the method repeatedly on each data point. Is there a way to store the result in a local variable within the template, like this:

{ clientData = findClientName(item.client_id) }
{{ clientData.f_name }}
{{ clientData.l_name }}

What am I overlooking or not considering?

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

It is advisable to utilize a computed property in this scenario and iterate through that property using v-for. Below is an example provided to replicate your situation:

new Vue({
  el: '#app',
  data: {
    a: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
    b: ["bbb", "sss", "ccc", "eee"]
  },
  computed: {
    isInA() {
      return this.b.filter((item) => {
        return this.a.includes(item)
      })
    }
  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="item in isInA">
      {{item}}
    </div>
  </div>

If your arrays consist of objects like your case, you will need something like this:

computed:
 cpt_clients(){
return this.clientList.filter((cl)=>{
                          return this.otherList.findIndex(item=>{return item.id==cl.id;})!==-1;
                        });
         }
       }

and in your template, use the following:

  <v-card-text v-for="cl in cpt_clients" >
       {{cl.name}}
        {{cl.id}}
   </v-card-text>

Answer 2

It is advisable to utilize a computed property in this scenario and iterate through that property using v-for. Below is an example provided to replicate your situation:

new Vue({
  el: '#app',
  data: {
    a: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
    b: ["bbb", "sss", "ccc", "eee"]
  },
  computed: {
    isInA() {
      return this.b.filter((item) => {
        return this.a.includes(item)
      })
    }
  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="item in isInA">
      {{item}}
    </div>
  </div>

If your arrays consist of objects like your case, you will need something like this:

computed:
 cpt_clients(){
return this.clientList.filter((cl)=>{
                          return this.otherList.findIndex(item=>{return item.id==cl.id;})!==-1;
                        });
         }
       }

and in your template, use the following:

  <v-card-text v-for="cl in cpt_clients" >
       {{cl.name}}
        {{cl.id}}
   </v-card-text>

Answer 3

Answer №2

If you find yourself needing data from another list, you may need to perform a lookup. One approach could be to normalize the client list beforehand and then utilize it in the template loop. Consider the following example:

data () {
  return {
    mapped: [],
    clientList: [...]
  }
},
mounted () {
  this.mapped = this.clientList.map(({ id, f_name, l_name }) => {
    return { [id]: { f_name, l_name } }
  })
}

With this setup, your template would look like this:

<template>
 ...
    <v-card-text v-if="mapped.hasOwnProperty(item.client_id)">
      {{ mapped[item.client_id].f_name }}
      {{ mapped[item.client_id].l_name }}
    </v-card-text>
 ...
</template>

Answer 4

If you find yourself needing data from another list, you may need to perform a lookup. One approach could be to normalize the client list beforehand and then utilize it in the template loop. Consider the following example:

data () {
  return {
    mapped: [],
    clientList: [...]
  }
},
mounted () {
  this.mapped = this.clientList.map(({ id, f_name, l_name }) => {
    return { [id]: { f_name, l_name } }
  })
}

With this setup, your template would look like this:

<template>
 ...
    <v-card-text v-if="mapped.hasOwnProperty(item.client_id)">
      {{ mapped[item.client_id].f_name }}
      {{ mapped[item.client_id].l_name }}
    </v-card-text>
 ...
</template>

Answer 5

Answer №3

I have discovered a clever workaround to address the absence of local variables in this situation. By encapsulating the value within a single-element array, I can take advantage of VUE's built-in support for array iteration:

<template v-for="local_variable in [object.longComputationValueProducer().evenMoreCPUWork()]">
    <!-- This block will be run exactly once -->
    <div>{{ local_variable.read }}</div>
    <div>{{ local_variable.read_without_recompute }}</div>
    <div>{{ local_variable.read_again_without_recompute }}</div>
</template>

Answer 6

I have discovered a clever workaround to address the absence of local variables in this situation. By encapsulating the value within a single-element array, I can take advantage of VUE's built-in support for array iteration:

<template v-for="local_variable in [object.longComputationValueProducer().evenMoreCPUWork()]">
    <!-- This block will be run exactly once -->
    <div>{{ local_variable.read }}</div>
    <div>{{ local_variable.read_without_recompute }}</div>
    <div>{{ local_variable.read_again_without_recompute }}</div>
</template>

Answer 7

Answer №4

Personally, I believe computed is superior to method because it relies on your localId for functionality.

computed: {
   getClientsById (clientId) {
     return this.currentClientList.filter((ccl) => { return this.currentClientList.id === localId });
   }
} 


<v-card-text v-for="item in getClientById">
    {{ item.name }}
</v-card-text>


// Another approach without the use of methods and computed

<v-card-text v-for="item in currentClientList" v-if=item.id === localId>
    {{ item.name }}
</v-card-text>

Answer 8

Personally, I believe computed is superior to method because it relies on your localId for functionality.

computed: {
   getClientsById (clientId) {
     return this.currentClientList.filter((ccl) => { return this.currentClientList.id === localId });
   }
} 


<v-card-text v-for="item in getClientById">
    {{ item.name }}
</v-card-text>


// Another approach without the use of methods and computed

<v-card-text v-for="item in currentClientList" v-if=item.id === localId>
    {{ item.name }}
</v-card-text>

Setting up a variable within a v-for iteration in Vue JS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Node unable to interpret accented characters from CSV file input

Unusual Type Inference in Typescript {} when Evaluating Null or Undefined

Error: null value cannot be scrolled into view - testing with react, jest, and enzyme

Sorting Columns in JQuery Datatables

The Material UI date range picker fails to close once a selection has been made

Challenges with HTML and JavaScript

Creating a simulated RESTful backend using Sinon.js for an Angular.js project

Incorporating Chakra UI, what is the best way to display a modal box upon page load?

Typing in Text within Kendo Textbox using Protractor

What is the maximum character limit for the JQuery validation plugin?

Scrolling to the complete height of a div using scrollTop

What is the process for a server to transmit a JWT token to the browser?

Unable to utilize material tabs in this situation

Error: The function you are trying to reference is undefined

Utilize mapping function to merge arrays

I am unable to modify the local JSON file during runtime

Instructions on creating an individual DropdownIndicator component with React-select for the purpose of reusability in different sections of the project

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

Tips on setting and utilizing custom environment variables in a Vue Electron application

Using JavaScript to Establish Default Homepage in FireFox and Internet Explorer