access variable from within foreach loop in vue.js

Question

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 :)

share any live snippet/ demo ? nothing is clear with the code you provided. — Niklesh Raut
– Niklesh Raut, Commented Apr 25, 2018 at 13:02
you can define before function var me= this and inside forEach() you can access using me.variable. — Narendra Jadhav
– 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
– 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
– Mik_A, Commented Apr 25, 2018 at 13:40

Victor Oliveira · Accepted Answer · 2018-04-25 14:57:51Z

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.net/2eAqE/1149/

answered Apr 25, 2018 at 14:57

Victor Oliveira

1,1291 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

access variable from within foreach loop in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related