Question

我正在尝试使用Browserify使用Vue构建chrome扩展，在我的组件文件中，我试图从mounted方法调用名为animateBackground的组件的方法，但是在控制台上它给出了意思是错误，如何调用组件的数据和方法？代码：

export default {
      name: "app",
      data() {
        return {
          'message': "thgdfseaw"
        }
      },
      mounted() {
        chrome.storage.local.get("bingImage", function(output) {
          if (output != undefined || output != null) {
            console.log(this.message);
            this.animateBackground(output.bingImage.base64);
          }});
  },
  methods: {
    animateBackground(base64) {
      $("#app").animate({ opacity: 0 }, "slow", function() {
        $(this)
          .css({ "background-image": "url(" + base64 + ")" })
          .animate({ opacity: 1 });
      });
    }
  },
  components: {
    AppSection
  }
};

Answer 1

回调中的{p> this不是您的vue实例，您可以console.log查看它是什么。有很多解决方法。其中一个你可以使用es6箭头函数语法，你也可以声明一个新变量并在回调之外分配this然后用变量调用它，这是一个例子：

export default {
      name: "app",
      data() {
        return {
          'message': "thgdfseaw"
        }
      },
      mounted() {
        var _vue = this // << here
        chrome.storage.local.get("bingImage", function(output) {
          if (output != undefined || output != null) {
            console.log(_vue.message); // << then access it like this
            _vue.animateBackground(output.bingImage.base64);
          }});
  },
  methods: {
    animateBackground(base64) {
      $("#app").animate({ opacity: 0 }, "slow", function() {
        $(this)
          .css({ "background-image": "url(" + base64 + ")" })
          .animate({ opacity: 1 });
      });
    }
  },
  components: {
    AppSection
  }
};

调用时，Vue.js方法未定义

1 个答案: