Connect Zebra Browser Print with Vue 2.0

I am currently working on integrating the Zebra BrowserPrint-1.0.4.js into Vue. You can find the code snippet at the following link: https://gist.github.com/robinsk/a667a490b7ef8192bbb9fcfc87f15757

However, I am facing an issue when trying to save the object.

mounted() {
    this.zebraDefaultDevice();
},
methods: {
    zebraDefaultDevice() {
        BrowserPrint.getDefaultDevice('printer', function (printer) {
            if ((printer != null) && (printer.connection != undefined)) {
                console.log(printer);
                this.selectedPrinter = printer;
            };
        });
    },
 }

The console.log function successfully gives me the required printer object.

t.Device {name: "29j164701943", deviceType: "printer", connection: "usb", uid: "29j164701943", version: 2, ...}

However, when I try to save the object with this.selectedPrinter, I encounter the following error message:

Uncaught TypeError: Cannot set property 'selectedPrinter' of undefined

I also attempted to save it into a global variable.

window.selectedPrinter

Unfortunately, when I attempt to access the variable outside the function, it returns null.

I would appreciate any assistance in resolving this issue.

Answer №1

My suggestion is to utilize the 'app' variable, which is the Vue instance you assigned, to access external resources. This can be done by accessing 'app.selectedPrinter'.

Give it a try, it should be effective.

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

Can you tell me the JavaScript alternative to Jquery's .load() shortcut method?

Exploring the modernized version of jquery, specifically the .load() ajax shorthand method that is not deprecated. One example to consider is finding the javascript equivalent for the traditional jquery ajax shorthand method mentioned below: $("#targetdi ...

What is the best way to cancel a Promise if it hasn't been resolved yet

Let's consider a situation where I have implemented a search function to make an HTTP call. Each call made can have varying durations, and it is crucial for the system to cancel any previous HTTP requests and only await results from the latest call. ...

How to seamlessly integrate Redux into your React project using create-react-app?

Is it correct to pass a reducer as props when using a rootreducer? This is the content of my rootReducer.js file: import { combineReducers } from 'redux'; import simpleReducer from './simpleReducer'; import messageReducer from '. ...

Utilizing Boolean Operators in JavaScript with Thymeleaf: A Guide

When incorporating Boolean conditions in JavaScript with Thymeleaf using th:inline="javascript", an exception is thrown which appears as follows: org.xml.sax.SAXParseException; lineNumber: 14; columnNumber: 22; The entity name must immediately follow the ...

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code: camListApp.controller("Hello", function($scope, $http, $uibModal){ $scope.del=function(data){ var result=confirm('are you sure?'); if(result==true){ var index=getSelectedIndex(data); ...

In PHP, show the restore button if the status is 0; otherwise, display the delete button

I have a single button labeled "Delete." When the admin clicks on this button, the record is updated in the database and the button changes to "Restore," and vice versa. If the status of the record is 0, then the "Restore" button should be displayed. I a ...

Solution for fixing the error: MongooseError [OverwriteModelError]: It is not possible to overwrite the `User` model after it has been compiled in

I am new to working with the MERN stack and currently attempting to create an exercise tracker app following a tutorial on YouTube. However, I am encountering the Mongoose: OverwriteModelError when running the server and cannot seem to identify where I am ...

"Exploring the power of Knockout JS by utilizing the foreach loop to iterate through

I have an observableArray: self.stats = ko.observableArray([ {"DFTD" : new Stat("Defensive TD", "DFTD",0,20,0,self.playerGroups[1])}, {"GL" : new Stat("Games Lost", "GL",0,16,0,self.playerGroups[2])}, {"FGA" : new Stat("Field Go ...

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

Avoiding the creation of a history entry while switching languages on a Next.js website

I'm currently developing a Next.js project that includes a language dropdown feature for users to choose their preferred language. In the existing setup, we are utilizing the router.push method from next/router to update the language selection and red ...

Implementing a JQuery modal with backend coding

I have encountered a problem in my ASP.NET code-behind where I am trying to incorporate a modal popup. Despite my efforts, I have not been able to successfully implement it. Do you have any suggestions on how I should proceed with this process? <scrip ...

Explore the power of VueJS for creating stunning data visualizations using the Django API

As a newcomer to frontend development, I am currently working on designing a data visualization platform that interacts with the RestAPI provided by Django. The data I am dealing with is in the form of a nested array of JSON. The structure of the JSON dat ...

The expression req.files consistently comes back as an empty [object]

I have been encountering an issue with saving uploaded files using their original names (with express-fileupload). Whenever I upload a file, it gets saved in the directory as [object Object]. Node: var express = require('express') var app = exp ...

Apply jQuery styling to new select box on page in order to maintain consistent styling throughout

I've encountered an issue with my jQuery select box styling. It appears to work perfectly on the initial page load, but when new content containing a select box is dynamically loaded onto the page, the styling doesn't get applied to it. Can anyo ...

Oops! There was an issue with the form field - make sure to include a MatFormFieldControl for proper validation on the

I am working on an Angular application that utilizes Angular Material components. Despite conducting extensive research online, I have not been able to find a suitable solution to the specific error message I have encountered. The issue revolves around a ...

Common causes leading to my header component experiencing hydration errors in Next.js

I am currently developing a job portal and encountering an issue with user authentication using JWT in combination with local storage. The problem arises in my header component when the user is authenticated, and if the web page is reloaded, I receive a hy ...

Combining multiple JSON strings into a single object using JavaScript

I am facing an issue with parsing a JSON output that contains two strings with specific formats: [{"device_id":"9700015","update_time":"2017-01-04 18:30:00","sensor_value":"1287.6"}] [{"device_id":"9700016","update_time":"2016-12-31 18:30:00","senso ...

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...