how do I access this.variable from a foreach loop?

I have like this

<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
      })
    }
  },

So what I want is to have the names in my list. Thanks people :)

how do I access this.variable from a foreach loop?

I have like this

<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
      })
    }
  },

So what I want is to have the names in my list. Thanks people :)

• javascript
• foreach
• vue.js
• vuejs2
• var

Share Improve this question Follow asked Apr 25, 2018 at 12:57 Mik_AMik_A 36655 silver badges1616 bronze badges 4

• share any live snippet/ demo ? nothing is clear with the code you provided. – Niklesh Raut Commented Apr 25, 2018 at 13:02
• 1 you can define before function var me= this and inside forEach() you can access using me.variable. – Narendra Jadhav Commented Apr 25, 2018 at 13:03
• 1. What names property is this.names supposed to set? 2. Note that it will get overwritten repeatedly, as you have it in the forEach callback. 3. Note that this will be either undefined (strict mode) or the global object (loose mode) because you're using a traditional function as the callback and not specifying a this value forEach should use. You may want an arrow function, but it's impossible to say from what you've shown. – T.J. Crowder Commented Apr 25, 2018 at 13:05
• T.J Crowder. yes I should be putting all thenames in to object value right? and then getting them each with v-for loop I'm not sure hiw to do that though (yet) – Mik_A Commented Apr 25, 2018 at 13:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

There is two way you can access this inside another function scope (in this case forEach() ).

You can simple create a new variable referencing your scope, like

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

    // I can access scope here

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

, and you will have access to this variable scope inside forEach.

Or you can use arrow functions, which does not create a new scope. Therefore, same this as outside the forEach. Here is an example:

http://jsfiddle/2eAqE/1149/