Dynamically setting properties in a Vue component using Angular

After browsing through this interesting discussion, I decided to create a web component:

<my-vue-web-comp [userId]="1"></my-vue-web-comp>

Initially, everything was working smoothly in Angular when I assigned a static property. However, things took a turn when I attempted to set the property dynamically:

<my-vue-web-comp [userId]="{{ usersInfo.userId }}"></my-vue-web-comp>

Unfortunately, my userId property ended up being empty within the web-component. It seems like the conversion of the web component is happening during compilation rather than at runtime.

Does anyone have any suggestions on how to resolve this issue?

javascriptangulartypescriptvue.jsweb-component

Answer №1

When working with Angular, your options for passing data to a Vue web component are limited. You can either use the following syntax:

<my-vue-web-comp [userId]="usersInfo.userId"></my-vue-web-comp>

or you can try this alternative approach:

<my-vue-web-comp userId="{{ usersInfo.userId }}"></my-vue-web-comp>

If neither of these methods work, you can attempt the following:

<my-vue-web-comp user-id="{{ usersInfo.userId }}"></my-vue-web-comp>

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

What is the essential Angular 2 script that must be included for a simple Angular 2 application to function properly?

I'm currently working through the latest Tuts+ tutorial on Angular 2 In the tutorial, the author references adding this script: <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script> However, in the most recent beta re ...

javascriptangularnpm

Live AJAX inquiries in progress

Is there a way to track the number of active AJAX requests in jQuery, Mootools, or another library similar to Prototype's Ajax.activeRequestCount? I am looking for a method that can be used across different libraries or directly through XMLHttpRequest ...

javascriptjqueryajaxmootoolsprototypejs

Silent response upon click event listener

I'm having an issue with a navbar item not calling the reverseService function on click as expected. Although my IDE is indicating that the reverseService function is never used, VueJS dev tool doesn't show any problems. However, manually changi ...

javascriptvue.js

How to use Javascript to toggle a popup containing an autoplaying Vimeo video

I am looking to create a pop-up window containing a Vimeo video inside. I have a div on my webpage with an id of "showVideo". When this div is clicked, I want to display a pop-up (new div with the id of "opened-video"). The "opened-video" div contains an i ...

javascriptjqueryhtmlcssvideo

Declaring global types in a NX and NextJS monorepository for enhanced development consistency

I've been searching online to find a good solution for my issue, but so far I haven't had any luck. Currently, I have a NX monorepo with NextJS and I'm attempting to create a global types/ folder that can be accessed by all my apps and libs ...

reactjstypescriptnext.jsmonoreponrwl-nx

Using the MongoDB aggregate framework to determine the total employee count per unique state

I'm currently working on displaying the total number of employees for each state within companies located in the USA. I aim to showcase this information for all states included in the dataset using sample numbers as a reference: AZ : 1234 CA : 30000 ...

javascriptmongodbaggregation-framework

Accessing Angular templates scope after the document is ready using angular.element()

I am currently learning Angular and experimenting with the Symfony2 + AngularJS combination. I am facing a specific issue that I need help with: Within my index.html file, I have the following script: <script> global = {}; $(document).ready ...

javascriptjqueryangularjssymfonytwig

Executing the collection.find() function triggers an internal server issue and eventually leads to a timeout error

My ExpressJS backend was running smoothly with hardcoded data, but when I integrated MongoDB into the system, my requests for data started timing out. I added a record to a collection using the command prompt: > db stackmailer > db.sites.find() { ...

javascriptangularjsmongodbexpress

VueX getter not functioning with Async/Await, while log function does work

I am working on a situation where I have a collection of conversations associated with userIDs that I need to iterate through. Within this loop, I must make a call to Firebase to retrieve the corresponding userNames and then generate an object containing t ...

javascriptfirebasevue.jsasync-awaitvuex

javascript categorize data by key and display in a tabular format

I have a Client ID and gender information available. Shown below is a JSON response along with a JavaScript function to display the data in a table format. The JSON response structure is as follows: studies = [{ "id": { "Value&qu ...

javascriptjson

When using JSON.stringify, the output is null. However, when using document.write, the data

I am currently working on a plugin for crawljax that involves executing some JavaScript code, similar to the following: String result = browser.executeJavaScript(script).toString(); The script code is as follows: function getElementPosition(id) { var el ...

javajavascriptjsongoogle-chromestringify

Having trouble with building an Ionic3 project, getting the error message: "Execution failed for task ':app:processDebugResources'. > Failed to execute aapt"

My attempt to develop an android app in ionic 3 hit a roadblock when running 'ionic cordova build android' resulted in the error: Execution failed for task ':app:processDebugResources'. > Failed to execute aapt I have integrated plug ...

androidtypescriptionic3build.gradleandroid-build

React | What could be preventing the defaultValue of the input from updating?

I am working with a stateful component that makes a CEP promise to fetch data from post offices. This data is retrieved when the Zip input contains 9 characters - 8 numbers and a '-' - and returns an object with the desired information. Below is ...

node.jsreactjstypescript

Creating an Array of dynamically generated elements using jQuery

A dynamic table is being generated using jQuery's .append() function: $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td&g ...

javascriptjqueryhtmlajax

What types of numerical values is the Number data type capable of storing?

Is it true that a JavaScript number has the ability to store both a 64-bit number and a 64-bit Integer? I'm still unsure about this concept. ...

javascriptprimitive

Error Encountered While Building AWS Amplify with Ionic 5 and Angular 10

Our team is currently facing a challenge at my company that we've been struggling to resolve, and I was hoping someone here could offer some assistance. We are using AWS Amplify in our Angular 10/Ionic 5 project, and encountering the following error: ...

angulartypescriptionic-frameworkaws-amplifyionic-native

Jpicker is renowned for its transparency feature

I am currently using the Jpicker jpicker-1.1.6.js script which can be found at Below is a snippet of my code: <script type="text/javascript"> $(function() { $.fn.jPicker.defaults.images.clientPath='/img'; var ...

javascriptjquery

Creating a private variable in Javascript is possible by using getter and setter functions to manage access to the

Is this the correct way to simulate a private variable? var C = function(a) { var _private = a + 1; // more code... Object.defineProperties(this, { 'privateProp': { get: function() { return _privat ...

javascriptprivateencapsulationsettergetter

"Upon invoking the console log, an empty value is being returned when attempting to access the

Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...

javascripthtmlforms

What is the best location to specify Access-Control-Allow-Origin or Origin in JavaScript?

After researching, I found out that I need to set my Access-Control-Allow-Origin or Origin tags. But the question is: where do I actually add these? The suggestions were to use them in the header section. I couldn't find any detailed explanation on t ...

javascriptphpjquerycross-domain