How to retrieve a variable from inside a foreach loop in Vue.js

Question

How to retrieve a variable from inside a foreach loop in Vue.js

How can I access the value of `this.names` from within a foreach loop?

This is what my code looks like:

<template><div><li>{{ names }}</li></div></template>
var initData = {
  names: '',
  }
}
export default {
  data: function () {
    return initData
  },
  props: ['nameData'],
  methods: {
    printNames: function () {
      let tempData = JSON.parse(JSON.stringify(this.nameData))
      tempData.biglist.forEach(function (nObj) {
        let cName = nObj.CeName
        console.log(cName) // gives long list of names
        this.names = cName
      })
    }
  },

I would like to populate my list with the `names` value. Thank you in advance for your help :)

javascript foreach vue.js vuejs2 var

Answer 1

Answer №1

If you need to access this inside another function scope, such as forEach(), there are two methods you can use.

One option is to simply create a new variable that references your scope:

printNames: function () {
  let scope = this
  let tempData = JSON.parse(JSON.stringify(this.nameData))
  tempData.biglist.forEach(function (nObj) {

    // You can access the scope here

    let cName = nObj.CeName
    console.log(cName) // gives long list of names    
    this.names = cName
  })
}

This way, you will have access to the variable scope inside the forEach loop.

Alternatively, you can utilize arrow functions, which do not create a new scope. This means you will have the same this as outside the forEach loop. Here is an example:

http://jsfiddle.net/2eAqE/1149/

Answer 2

If you need to access this inside another function scope, such as forEach(), there are two methods you can use.

One option is to simply create a new variable that references your scope:

printNames: function () {
  let scope = this
  let tempData = JSON.parse(JSON.stringify(this.nameData))
  tempData.biglist.forEach(function (nObj) {

    // You can access the scope here

    let cName = nObj.CeName
    console.log(cName) // gives long list of names    
    this.names = cName
  })
}

This way, you will have access to the variable scope inside the forEach loop.

Alternatively, you can utilize arrow functions, which do not create a new scope. This means you will have the same this as outside the forEach loop. Here is an example:

http://jsfiddle.net/2eAqE/1149/

How to retrieve a variable from inside a foreach loop in Vue.js

Answer №1

Similar questions

Having trouble showing the information in JavaScript

Issue with Vue plugin syntax causing component not to load

federatedSignIn enhancement results in accessToken issuance without scopes

Retrieve data by sorting based on the count column in a joined table with Sequelize

Communicating information across Vue.js components

Tips for adding CSS attributes to a <style> tag in Internet Explorer

Adjustable <a> component

Is it possible to create a form inside a tooltip?

Make a copy of an array and modify the original in a different way

Functionality in Three.js that involves selecting nearby objects with an event handler and ensuring that the self object is

VueJs: Passing the value of a 'computed function' from a child component to its parent component using $emit with an optional payload and $on

Retrieve specific elements from an array based on the other elements present in the array

Utilize a Vue2 component that has been defined in the same file within another

Assign the form's data to a backbone model in order to invoke a REST service

Drag-and-drop functionality in Angular JavaScript Tree View for rearranging nodes and inserting new nodes

printing jquery value inside html elements

Why does JQuery ajax always fail to succeed? Where could the error be?

Adjust the size of an array based on the specified index

Utilizing multiple local images effectively within a Next.js 13 component: Best practices for implementation

Submit function causes mutation in React form state