1

Update New screenshot showing the svgHeight exists in this in the _data key. enter image description here ChromeDevTool using normal functionI have one component in Vue, and I want to draw two rectangles using d3. I try to set the x and y attribute of the rect element using a callback method defined in the Vue component.

But I can not access the data property set for Vue component inside this callback. Here is my component, I am getting confused further because when I hit the debugger and does console.log(this.svgHeight) in the Chrome DevTools console directly, it does log the svgHeight defined in the data.

<template>
  <v-container class="travel-pattern">
    <v-layout>
      <v-flex xs12 id='svg-container'>

      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
export default {
  name: 'travel-pattern',
  data () {
    return {
      msg: 'Travel Pattern component',
      dataset: [{h: 50, w: 100}, {h: 80, w: 200}],
      svgHeight: 100,
      svgWidth: 500
    }
  },
  methods: {
    getRectHeight: d => {
      return d.h
    },
    getRectWidth: d => {
      return d.w
    },
    getRectX: (d, i) => {
      return (i * d.w) + 25
    },
    getRectY: function () {
      // return 50
      debugger
      let x = this.svgHeight // here x gets undefined.
      return (x)
    },
    getClickEvent: d => {
      debugger
    }
  },
  mounted () {
    // 1. Draw two rectangles
    // 2. Each rectangle can be clicked
    // 3. Once clicked a pop up will appear with a text field
    // 4. Entering a color in the text field will change the other rectangles color

    // Create an SVG element
    var svg = d3.select('#svg-container')
      .append('svg')
      .attr('height', this.svgHeight)
      .attr('width', this.svgWidth)

    // Create a rectangle for each dataset
    var rectangles =
      svg.selectAll('rect')
        .data(this.dataset)
        .enter()
        .append('rect')

    // Actually draw the rectangles
    rectangles.attr('x', this.getRectX)
      .attr('y', this.getRectY)
      .attr('width', this.getRectWidth)
      .attr('height', this.getRectHeight)

    rectangles.on('click', this.getClickEvent)
  }
}
</script>
Payam Mesgari
  • 953
  • 1
  • 19
  • 38
  • Possible duplicate of [VueJS: why is "this" undefined?](https://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) – thanksd Sep 13 '17 at 11:22
  • @thanksd changed it to a normal function, still the same. Please see the screenshot. – Payam Mesgari Sep 13 '17 at 11:36
  • Screenshot makes it look like there is a value for `svgHeight`. What happens when you click the `(...)` to reveal the value of `svgHeight`? – thanksd Sep 13 '17 at 12:04
  • @thanksd I added another screenshot, the value for `svgHeight `exists and it is defined in the `_data` key, and at the same time you can see the debugger at the `return (x)` line and `x = undefined`. – Payam Mesgari Sep 13 '17 at 12:19
  • I'm seeing that `x` gets set to `100`. https://codepen.io/anon/pen/WZNBYO?editors=0010 – thanksd Sep 13 '17 at 12:59
  • @thanksd yes true! Though it is strange to me because if I delete your `console.log('value of x is ' + x)` then `x` is shown as undefined (in the Chrome DevTools, it does actually return the value). It seems to me it needs one extra line to set the value of `x`, why is that? – Payam Mesgari Sep 13 '17 at 13:11
  • I'm not seeing that. When debugging, `x` will only get set once you step past the line setting it. – thanksd Sep 13 '17 at 13:19

0 Answers0