Javascript Can'；不要在函数外使用变量。给出未定义的

我有这个npm包，缩短了url，它没有太多的文档。它接受这个“this.src”url并将其缩短。我想在html中使用“url”元素，我该怎么做？它给了我不明确的答案

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

上传成功
短网址
{{urlShare}}DD
//未定义
var shortUrl=require（“节点url缩短器”）；
导出默认值{
名称：“图像”，
道具：[“src”]，
数据（）{
返回{
urlShare:null，//未定义
};
},
方法：{
shorter（）{
this.urlShare=shortUrl.short（this.src，函数（err，url）{
返回url；
});
console.log（this.urlShare）；//未定义
},
},
};

我不熟悉该软件包，但它似乎在使用回调而不是返回值。试试这个：

shorter（）{
shortUrl.short（this.src，（err，url）=>{
this.urlShare=url；
console.log（this.urlShare）；
});
},

this.src为您提供了什么？你确定你得到了正确的格式吗？嘿，谢谢你的回答，它给了我一个我检查过的url，我通常在“”上使用url，我会被诅咒的。我想我已经试过了，非常感谢！为什么不起作用，为什么起作用？不客气。您可能使用了

function（）

，而不是。使用

函数

时，您将无法访问组件的

此

，因为非箭头函数会创建自己的

此

。