Controlling Vue data with an external JavaScript file

I'm facing an issue with manipulating Vue data through an external js file that I've exported a function from. Despite my efforts, I haven't been able to achieve the desired outcome. Here's what I have attempted so far:

My import statement looks like this :

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

The function invocation is done in this manner :

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

This is the playURL method within the device.js file :

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

Unfortunately, the manipulative data of my Vue component remains unchanged. Is there a way to resolve this issue?

javascriptvue.js

Answer №1

To ensure that the playURL function's context is bound to the current component, you can use the bind method. This will allow you to execute the function properly.

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

If you find yourself needing to use the playURL function in multiple places within Vue files, consider utilizing Mixins in Vue. Mixins are designed to handle such scenarios by intelligently mixing data and methods together.

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

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

javascripthtmlcss

Tips for using Selenium and Javascript executor to search through the Canvas system?

Is it possible to automate interaction with a 'graph' created on a canvas? I need to be able to click on elements, drag them, and perform other actions like getting text. Can this be achieved with automation using Selenium and JavaScript executor ...

javascriptselenium-webdrivercanvasautomationprotractor

Change the value of a boolean cell within my database table

I have a task where I need to dynamically update the status of the show_msg parameter based on user actions. When the submit button is pressed, I want to set it as TRUE if the checkbox is checked, and FALSE if not. The main HTML code includes a popup wind ...

javascripthtmlruby-on-railsajax

Angular4 and jQuery working together for effective navigation and pagination

Trying to implement pagination in angular 4 and jQuery, but encountering an issue where clicking on the next button causes it to skip through multiple pages at once (2, then 3, then 5)... Component code: addClass(x) { $(".page-item").click(function () ...

javascriptjqueryangular

Developing a custom logging middleware with morgan

I am trying to develop a middleware using morgan. I have attempted to export the middleware function and then require it in app.js. However, I am facing an issue where it is not working as expected. Middleware: const morgan = require('morgan&apos ...

javascriptnode.jsexpressmiddlewaremorgan

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

javascripthtmlcsssvg

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

javascriptphphtml

`When you extend a $resource object, it effectively removes the prototype from the

Here's the current code snippet I'm working with: // Factory angular.factory('Student', function() { var defaults = { StudentId: null }; var Student = function(params) { angular.extend(this, angular.copy(de ...

javascriptangularjsjavascript-objectsangularjs-resource

Switching between components in vue.js: A beginner's guide

In my project, I created a Dashboard.vue page that consists of three child components: Display, sortBooksLowtoHigh, and sortBooksHightoLow. The Dashboard component also includes a select option with two choices: "Price: High to Low" and "Price: Low to High ...

javascriptvue.jsvuejs2vue-component

Issue with AngularJS email input field not clearing or resetting after model binding is reset

I'm currently working on a form that includes fields for name, email, and phone number. <div ng-show="Nerd.adding"> <form class="col-sm-6" name="Nerd.nerdAddFrm" novalidate > <div class="form-group"> < ...

javascriptangularjsangular-ngmodel

Utilizing the protractor tool to navigate through menu options and access submenus efficiently

I am new to using Protractor and I'm struggling to write code that can select the menu, submenus, and click them within the div with id="navbar". Can someone please assist me with this issue? Unfortunately, I am facing difficulties posting the HTML co ...

javascriptnode.jsseleniumjasmineprotractor

An error was encountered in the JSON syntax: Unexpected symbol <

I have encountered a problem with my code that I cannot seem to resolve. Despite the JSON data being successfully sent to the backend and processed correctly, the success function of the call is never triggered. Here is the snippet of my function: Regist ...

javascriptajaxjson

JavaScript redirect following the successful assignment of a session variable through AJAX

I've recently been tackling a project that involves executing a JavaScript redirect to a specific page. This is achieved by establishing a session variable in PHP through an AJAX request, and then confirming that the session has been properly set. Onc ...

javascriptajaxsessionhttp-redirectvar

Mastering the Art of Trimming with Jquery

function DisplayDataForEdit(id) { $("#editContainer").slideDown("medium"); var parentId ='item'+ id; var colIndex = 0; var $row = $("#" + parentId).parent().parent(); $row.find('td').each(f ...

javascriptjquery

Sorting by two fields with varying value types in AngularJS

Need help sorting json data by two fields, prioritizing field value and then date. Check out this demo Json input [{ "title" : "Title 2", "pin" : false, "date" : 20130411204207 },{ "title" : "Title 3", "date" : 20140411204207 },{ "title" : "Title 4", ...

javascriptjsonangularjssorting

The functionality of jQuery typeahead ceases to perform after I choose an option from the dropdown menu

Initially, my jQuery typeahead autocomplete function works perfectly. However, after selecting an option from the list, it fails to show results when I try to use it again by typing in the input field. It seems like the typeahead functionality gets destro ...

javascriptjquerytypeahead.jstwitter-typeahead

What is the best way to simulate our services for controller testing?

Currently delving into angular js and experimenting with testing a controller. Here is the service I am using: angular.module('test'){ service.getAllServices = function() { var fullPath = url var deferre ...

javascriptangularjstesting

VueJS Hotel Reservation Datepicker: Trouble retrieving selected check-in date using event listener

I am new to VueJS and currently working on integrating the vue-hotel-datepicker into my project. I am having trouble figuring out how to utilize the checkInChanged event listener. This is the code snippet from my template: <datepicker :startDate ...

javascriptvue.jsdatepickervuejs2

Tips for preventing duplicate meta tags on your website

Currently working on my website utilizing next.js. A Question for Help The code snippet below can be found in the _document.js Head component. These meta tags are considered the root level. <meta name="description" content="~~~"/&g ...

javascripthtmlnext.jsmeta-tags