Assigning a prop value in Vue using JavaScript

I am currently facing a challenge with an old legacy MVC application that contains various UI technologies such as razor pages, jQuery, and Vue native components. The issue at hand is that although the new Vue components function perfectly in isolation, we are looking to initialize the component and its properties using an older JavaScript file.

Is it possible to achieve this without modifying the Vue entry script?

Our goal is to have a JavaScript file load customer data and then bind the Vue component with the customer ID. I initially attempted to use the data dictionary to set the data attribute (which I believed Vue would map to the prop), but unfortunately, this approach did not work due to a watch on the property.

It is important to note that the Vue component is utilized in other areas, which is why I am hesitant to make any modifications to it.

Answer №1

If you find yourself in a tight spot, there is a way to access and tweak Vue2 internals from an external source by utilizing the __vue__ property that is linked to the DOM element where Vue was initialized.

While this method is not officially endorsed, the creator of Vue mentioned that "the official devtool relies on it too, so it's unlikely to change or break." You can read more about it here.

It is advisable to limit the extent of manipulations done using this technique, but making changes such as setting a customer ID should be relatively straightforward.

(However, in Vue3 the process is a bit more complex; you will need to handle the DOM binding internally within Vue.)

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

Increase the time of a Date by 10 seconds

Is there a way to increase the time of a JavaScript date object by 10 seconds? For example: var currentTime = new Date(); var currentSeconds = currentTime.getSeconds() + 10; currentTime.setSeconds(currentTime.getSeconds() + currentSeconds); ...

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

Is your jquery keydown event detector failing to recognize key inputs?

Lately, I've been working on a new project and encountered an issue with a piece of code that used to work perfectly fine in a previous project. The code in question is $(document).keydown(function(keypressed){});, which I used to detect specific key ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

What is the best way to extract a CSS rule using PHP?

Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...

Issue with displaying the glyphicon-chevron on the carousel control

Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery. While the slide carousel control butto ...

Control the scope value using an AngularJS directive

I have a model with values that I need to modify before presenting them to the user. I have checked the documentation but might be overlooking something. For example, I would like to format my variable in this way: <span decode-directive>{{variable ...

There seems to be an issue as the function reporter.beforeLaunch cannot be identified and

I am currently attempting to incorporate the protractor screenshot reporter for jasmine 2. However, I encountered the following error in the terminal: /usr/local/bin/node lib/cli.js example/conf.js /Users/sadiq/node_modules/protractor/node_modules/q/q.j ...

Is it necessary to use a while loop instead of a for loop when iterating through and removing values from a JavaScript array?

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; function checkOdd(value) { return value % 2; } for (let i = 0; i < array.length; i++) { if (checkOdd(array[i])) { array.splice(i, 1); i--; } } The provided code snippet examines a ...

MUI's Checkbox with Radio Button feature functionality

In my project, I am looking to implement a Checkbox with radio button behavior inside an Accordion component. The challenge here is that only one item should be selected at a time. If one item is checked, it should automatically uncheck the previously sele ...

Empowering Components with React Hooks

I am currently in the process of transitioning from using class components to React hooks with the Context API. However, I am encountering an error and struggling to pinpoint the exact reason for it. Here are my Codes: // contexts/sample.jsx import React ...

When attempting to make an .ajax call within the select_node.jstree event for nodes that are not leaf nodes, the call is unsuccessful

When I make an AJAX call using $.ajax, everything works perfectly fine when the select_node.jstree event is triggered, except for non-leaf nodes. In this scenario, although the server receives the Ajax request and sends back the data, the success function ...

Adding elements to a multi-dimensional array that match elements from another array

I am working with two arrays: a = [ [a, b], [c, d], [e, f], [g, h] ] b = [ [a, 4], [1, 2], [e, 3] ] My challenge lies in updating the elements of array a when they match corresponding elements in array b. Specifically, I need to add a new ...

Unable to log out when the button is clicked

I am having trouble figuring out why I can't log out when clicking the button. I have a logout button in my header (navigation). My experience with React is limited. Within my project folder, I have a Store directory which contains an Auth-context f ...

Using Typescript/JSX to assign a class instance by reference

Looking to access an object's property by reference? See the code snippet below; class Point{ x:number; y:number; constructor(x,y) { this.x=x; this.y=y; } } const a = { first: new Point(8,9), second: new Point(10,12) }; let someBoo ...

oj-select-one displays a comprehensive list of values in the dropdown

Typically, oj-select-one will only display the first 15 values before requiring the user to search for more. Is there a way to show all values in the dropdown list without needing to use the search function? I attempted to use minimumResultsForSearch as s ...

There seems to be a problem as exits.success is not a recognized function -

Currently, I am exploring how to utilize Sails.js with the node-machine-syntax specifically in the context of listing flights. The code snippet below outlines my attempt at achieving this: /** * FlightsController * * @description :: Server-side actions fo ...

Tips for concealing an element with Clippy.js without relying on a timeout feature

Recently, I stumbled upon a fascinating JavaScript library called Clippy.js that allows you to incorporate Microsoft Word's classic virtual assistants into your web browser. While experimenting with it, I discovered that the text balloon vanishes afte ...

Using AngularJS routing with an Express 4.0 backend API

Recently, I began working on an application utilizing Express 4.0 server. Following a tutorial on scotch.io (http://scotch.io/tutorials/javascript/build-a-restful-api-using-node-and-express-4), I structured the routes to support a backend api serving an An ...

implementing static routing and user authentication in an Express application

I'm having trouble implementing the following: All requests should serve files from the /public folder. (e.g. -> /public/docu/index.html) If the user is not authorized, they should be redirected to the "oauth/login" route. Here is what I'v ...