CODEWITHSUNDEEP
javascriptvue.js
AEB
AEB

Reputation: 125

Manipulate Vue data in an external js file

I am exporting a function from an external js file and trying to manipulate a Vue data bu that way but currently, I am not able to that. Here is what I tried so far :

Imported js file like this :

import * as device from "../Device";

Invoked the method like this :

device.playURL(this.currentTVChannelUrl,this.loading,this.isPlayerShown);

Here is the method named playURL inside device.js file :

export function playURL(url,loading,isPlayerShown){
    player.play({
      uri: url,
    });
      loading = false;
      isPlayerShown = true;
}

It doesn't change the manipulative data of my Vue component. Is there a way to change them?

Upvotes: 0

Views: 261

Answers (1)

Himanshu
Himanshu

Reputation: 274

You can bind the this context of playURL to the current component and make this to work.

let bindedplayURL = device.playURL.bind(this);
bindedplayURL(this.currentTVChannelUrl)
playURL(url) {
  player.play({
    uri: url,
  });
  this.loading = false /* changes data in vue component directly no need to pass these varibles separately */
  this.isPlayerShown = true;
}

However, if you've created the playURL function for the reason to use it at various places inside Vue files. I'd even suggest you to look at Mixins in vue which solve this purpose only and they would intelligently mix the data and methods themselves.

Upvotes: 1

Related Questions