CODEWITHSUNDEEP
javascriptvue.js
Ilkar
Ilkar

Reputation: 2177

VUE how to assing value to variable from method

could you please help me how to assign values from method to variables in HTML?

I have in HTML:

<b-card-text>X position {{xpos}}</b-card-text>
<b-card-text>Y position {{ypos}}</b-card-text>

and would like to assign to xpos and ypos values from method:

methods: {
    show() {
      const canvas = document.getElementById('canvasId')
      // canvasMouseTrack.width = 1024
      // canvasMouseTrack.height = 800
      // console.log(rect.offsetY)
      // console.log(rect.offsetX)
      // console.log(rect.width)
      canvas.addEventListener('click', event => {
        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left - canvas.clientLeft
        const y = event.clientY - rect.top - canvas.clientTop
        // console.log('Pos x', x, ' Pos y', y)
        const xpos = x
        const ypos = y
      })
    },

but inside method i have error:

'xpos' is assigned a value but never used
'ypos' is assigned a value but never used

So, how to assing values from method?

Upvotes: 0

Views: 56

Answers (2)

ulou
ulou

Reputation: 5853

data: () => ({
   xpos: 0,
   ypos: 0
}),
methods: {
    show() {
      const canvas = document.getElementById('canvasId')
      // canvasMouseTrack.width = 1024
      // canvasMouseTrack.height = 800
      // console.log(rect.offsetY)
      // console.log(rect.offsetX)
      // console.log(rect.width)
      canvas.addEventListener('click', event => {
        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left - canvas.clientLeft
        const y = event.clientY - rect.top - canvas.clientTop
        // console.log('Pos x', x, ' Pos y', y)
        this.xpos = x
        this.ypos = y
      })
    },

Upvotes: 0

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

You can use data object and then simply use in the template and also in methods.

data () {
    return {
        xpos: '',
        ypos: ''
    }
},
methods: {
    show() {
      const canvas = document.getElementById('canvasId')
      // canvasMouseTrack.width = 1024
      // canvasMouseTrack.height = 800
      // console.log(rect.offsetY)
      // console.log(rect.offsetX)
      // console.log(rect.width)
      canvas.addEventListener('click', event => {
        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left - canvas.clientLeft
        const y = event.clientY - rect.top - canvas.clientTop
        // console.log('Pos x', x, ' Pos y', y)
        this.xpos = x
        this.ypos = y
      })
    },

Upvotes: 2

Related Questions