Unable to access variables beyond the function scope results in an undefined value

I'm currently working with an npm package that shortens URLs but I'm struggling because there isn't much documentation available. The package takes the "this.src" URL and shortens it, but when I try to use the "url" element in HTML, it returns undefined. Can anyone help me figure out how to properly utilize this package?

<template>
  <div id="image">
    <h2>Upload Successful</h2>
    <a target="_blank" :href="src">Image Link</a>
    <button @click="shorter">Short URL</button>
    <p>{{ urlShare }}DD</p> //GIVES UNDEFINED

    <div class="img">
      <a target="_blank" :href="src"> <img :src="src" alt="" /> </a>
    </div>
  </div>
</template>

<script>
var shortUrl = require("node-url-shortener");

export default {
  name: "Image",
  props: ["src"],
  data() {
    return {
      urlShare: null, //GIVES UNDEFINED
    };
  },

  methods: {
    shorter() {
      this.urlShare = shortUrl.short(this.src, function (err, url) {
        return url;
      });
      console.log(this.urlShare); //GIVES UNDEFINED
    },
  },
};
</script>

Answer №1

I haven't come across that specific package before, but it appears to be utilizing a callback function instead of directly returning a value. You could try implementing the following solution:

shorter() {
   shortUrl.short(this.src, (err, url) => {
      this.urlShare = url;
      console.log(this.urlShare);
   });
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing excessive CPU utilization from Node.js while executing the vue-cli-service serve command

Whenever I run my npm script that uses vue-cli-service serve, the CPU usage by Node exceeds 100%. How can I troubleshoot this problem? I am using a Mac and have installed Node through nvm. My Node version is 10.16 and my npm version is 6.9. ...

Using relative paths to showcase images in Node.js

I am currently working on my first Node.js MVC app where I am using native Node and not utilizing Express. One issue I am facing is the difficulty in displaying images from my HTML files through their relative paths. Instead of sharing my server.js and ro ...

Issue with Yeoman webapp generator and Gulp, encountering error when using Gulp-jade package

I'm encountering some difficulties integrating jade with yeoman's gulp webapp generator. The watch task is functioning properly, but when I attempt to build the project, I encounter the following error: stream.js:94 throw er; // Unhandled ...

Modifying a Nested Component with react-icons

As I work on creating a rating component that utilizes react-icons to display icons, I have encountered an interesting challenge. Currently, I am using the FaStarhalf icon which represents a pre-filled half star that can be flipped to give the appearance o ...

Sending a prop to a handler causes issues with navigation paths

I'm facing an issue with my handler and button component setup. Here's my handler: const addToCartHandler = (id) => { navigate(`/cart/${brand}/${id}?qty=${qty}`)}; And here's the button component using the handler: <Button onClick={a ...

How to properly implement envMap in Three.js?

Could someone assist me in finding a material similar to the one shown here? I attempted to implement it using the following code: * { margin: 0; padding: 0; } .object { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: no ...

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

Swapping out nodes for images using d3.js

Below is the code snippet I am currently executing http://jsfiddle.net/a7as6/14/ I have implemented the following code to convert a node to an image: node.append("svg:image") .attr("class", "circle") .attr("xlink:href", "https://github.com/favico ...

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

Guidance on exporting an Excel file from an HTML table, excluding the final row, using JavaScript

I'm able to export an Excel file from an HTML table, but I'm facing an issue where the last row (tr) meant for pagination on the screen is also being included in the exported result. How can I exclude this row from showing up in the Excel file? ...

What is the best way to hold off until Vue has completed its processing?

When running Selenium tests on a webpage, I often encounter reliability issues because the page is still processing "Vue" when the code begins searching for elements. It's essential to wait until Vue finishes loading before proceeding further. Is the ...

In need of clarification on the topic of promises and async/await

I have been utilizing Promises and async/await in my code, and it seems like they are quite similar. Typically, I would wrap my promise and return it as needed. function someFetchThatTakesTime(){ // Converting the request into a Promise. return new ...

Adding a trailing slash to the URL in an Express server causes it to be appended

I've encountered a strange issue with my express server. Whenever I try to use a specific URL route with the word 'bind,' an extra '/' is automatically added to it. This behavior isn't happening with other URLs that I've ...

Step-by-step guide on making a table of objects using JavaScript

As a new React user venturing into website creation, our goal is to design a table where each row outlines various details about an object. We aim to achieve rows similar to the example provided here. In my view, our strategy should involve generating a l ...

Is there a way to extract only the titles from this JSON array? (using JavaScript/discord.js)

How can I extract the "title" values from this JSON array using JavaScript? I need to retrieve all the "title"s and store them in a new array like shown below: array( `hey title1`, `hey title2`, ... ) I am unsure of the number of titles we will receive, b ...

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

While attempting to gather data, I encountered an interesting pagination challenge on the following URL: My expertise in Web Scraping was put to the test as this website implemented a unique JavaScript-driven pagination. For the initial 5 pages, it simply ...

Steps to implement jQuery after executing the command "npm install jquery"

Greetings! I recently utilized npm install jquery to add jQuery to my project. However, I noticed that it was downloaded into node_modules\jquery along with some unnecessary files. My goal is to only move node_modules\jquery\dist\jquer ...

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

Looping through an array of nested objects using Vue

I have encountered a challenge with accessing specific data within an array that I am iterating over. The array is structured as follows, using Vue.js: companies: [ name: "company1" id: 1 type: "finance" additionalData: "{& ...

Pusher authentication issue: socket ID not defined

I am currently facing an issue while trying to establish a private channel for users to transmit data to my node.js server. Upon making the request, I encounter an error where pusher:subscription_error is returned with the error code 500. Upon checking my ...