Assigning a value to a variable from a method in Vue: a step-by-step guide

Question

Assigning a value to a variable from a method in Vue: a step-by-step guide

I'm having trouble assigning values from a method to variables in HTML. Here's what I have in my code:

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

I would like to assign values to xpos and ypos from the following method:

methods: {
    show() {
      const canvas = document.getElementById('canvasId')
      
      canvas.addEventListener('click', event => {
        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left - canvas.clientLeft
        const y = event.clientY - rect.top - canvas.clientTop
        
        const xpos = x
        const ypos = y
      })
    },

When trying to access xpos and ypos, I encountered an error:

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

Could you please advise me on how to properly assign values from this method?

javascript vue.js

Answer 1

Answer №1

To access and utilize the data object, you can seamlessly integrate it into both the template and methods sections.

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

Answer 2

To access and utilize the data object, you can seamlessly integrate it into both the template and methods sections.

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

Answer 3

Answer №2

data: () => ({
   positionX: 0,
   positionY: 0
}),
methods: {
    display() {
      const canvasElement = document.getElementById('canvasId')
      // canvasMouseTrack.width = 1024
      // canvasMouseTrack.height = 800
      // console.log(rect.offsetY)
      // console.log(rect.offsetX)
      // console.log(rect.width)
      canvasElement.addEventListener('click', event => {
        const boundingRect = canvasElement.getBoundingClientRect()
        const xCoordinate = event.clientX - boundingRect.left - canvasElement.clientLeft
        const yCoordinate = event.clientY - boundingRect.top - canvasElement.clientTop
        // console.log('Position x', xCoordinate, ' Position y', yCoordinate)
        this.positionX = xCoordinate
        this.positionY = yCoordinate
      })
    },

Answer 4

data: () => ({
   positionX: 0,
   positionY: 0
}),
methods: {
    display() {
      const canvasElement = document.getElementById('canvasId')
      // canvasMouseTrack.width = 1024
      // canvasMouseTrack.height = 800
      // console.log(rect.offsetY)
      // console.log(rect.offsetX)
      // console.log(rect.width)
      canvasElement.addEventListener('click', event => {
        const boundingRect = canvasElement.getBoundingClientRect()
        const xCoordinate = event.clientX - boundingRect.left - canvasElement.clientLeft
        const yCoordinate = event.clientY - boundingRect.top - canvasElement.clientTop
        // console.log('Position x', xCoordinate, ' Position y', yCoordinate)
        this.positionX = xCoordinate
        this.positionY = yCoordinate
      })
    },

Assigning a value to a variable from a method in Vue: a step-by-step guide

Answer №1

Answer №2

Similar questions

How to empty an array once all its elements have been displayed

Utilize Javascript to access Django Rest Framework API and obtain a Token

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

Develop a time-sensitive store system using HTML and JavaScript that toggles between open and closed status based on set

Using node.js for synchronous callbacks in node.js programming

Modify the onerror function of the image tag within the onerror function

Problem with Jquery Ajax, failing to recognize option values

Browse the string on the web browser

Running a JavaScript script after loading a page via AJAX is not functioning as expected

Issues with Vue Carousel Sliding Functionality

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

The issue of Nodejs Messenger broadcast message functionality being inoperative

Modify only the visual appearance of a specific element that incorporates the imported style?

Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

How can I achieve the same functionality as C# LINQ's GroupBy in Typescript?

The custom filter in AngularJS fails to activate when a click event occurs

Is it possible to eliminate the use of the `this` keyword in a Vue.js application?

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Struggling to pass command line arguments to index.ts with yarn?

Prevent form submission when processing is in progress