Vue CLI plugin passing dynamic JS variables into props - javascript

I'm using version 4.5 of the Vue CLI plugin and have built a component that accepts a title as a prop. I've then built my component into a web component and have included it into my HTML web page (that isn't a Vue JS project)
I'm trying to now update the props of my component in my HTML & JS project dynamically, and initially thought I could use a JS data attribute and update the data attribute prop as this would work, along with a watcher in my component, but this didn't update with the new dynamic value.
I've read a little online, and have implemented a suggestion, but can't seem to get my component to update with the JS variable, what am I doing wrong or what's the workaround?
<script>
var creditModalPluginTitle = 'Foo Bar'
</script>
<div style="margin-bottom:10em;">
<vue-les-creditreport :title="creditModalPluginTitle"></vue-les-creditreport>
</div>
Inside of my Credit Report plugin I'm outputting title but it's not updating with the value from creditModalPluginTitle.
I can't be the only person with this problem.

The markup shown looks like it's intended for the non Vue page, where you included your Vue component (vue-les-creditreport). This markup uses Vue syntax for data binding (i.e., the v-bind directive in :title="creditModalPluginTitle"), but that only works within Vue templates.
You would need to set the component's title property using vanilla JavaScript:
<div style="margin-bottom:10em;">
<vue-les-creditreport id="myElem"></vue-les-creditreport>
</div>
<script>
document.getElementById('myElem').title = creditModalPluginTitle
</script>

Related

How use simple VueJS component in Laravel project with VaniiliaJS

I have a Laravel (9) project but I don't use Inertia (or anything else). I use just VanilliaJS and webpack (mix) and render it with "simple" blade files.
BUT I want to use VueJS (3) only when I need it in some pages (as a component form that I want to reuse in several places).
As VueJS uses a virtual DOM and the component is rendered only on one page, the vanilliaJS that I use (also) on this page does not work anymore as it is bind on the "real" DOM.
So my question is how to use vuejs as a simple component and still use VanilliaJS on the same blade page?

AngularJS: Objects and data available from parent component?

I am working on a large web application written using AngularJS. Unfortunately, I only know Angular well from version 2, so I have a question about data passing. I need to develop a component that makes use of an existing component (whose code is really long and complex) and dynamically shows results based on the existing component. So I have a template of my component like this (my-component.html):
<div>
<ng-transclude></ng-transclude>
</div>
<!-- Here I have to write the logic to dynamically display the information arrived with ng-trasclude -->
The template in which I use my component will then look like this:
<my-component>
<component-made-by-other-developers
data1="$ctrl.CertainTypeOfObject"
data2="anotherTypeOfObject"
></component-made-by-other-developers>
</my-component>
The question is: how do I use the data (in the example data1 and data2) of the component developed by other developers within MY component (i.e. in the my-component.js and my-component.html files)? My problem is that the ng-transclude directive seems to give no access to the data of the other components (passed in input) if I want to use them in my own component. The question is: how can I use these data in my component (both template and controller)?
Try using ng-include inside your component and pass the data by using onload
Your code should look something like this:
<div ng-include="otherDeveloperComponent.html" onload="passedData=$ctrl.CertainTypeOfObject; source='myComponent'" ng-if="true">

props being mutated in vue js

On running my vue file I get the following console error, am new to the vue programming and trying to use syncfusion UI component to print a grid.
Prop being mutated: "hierarchyPrintMode"
Here is my code, where to add the computed property since i dont have any props and i couldn't understand the solution as listed here.
here is the hosted app,
https://codesandbox.io/s/printing-grid-wqrgz
Add hierarchyPrintMode: 'All' to a data section, pass it to a ejs-grid like this hierarchyPrintMode:="hierarchyPrintMode" and then in a code just change this.hierarchyPrintMode to anything you need

Vue.js set data in other component without event

Currently I'm using Laravel Nova. Behind the scenes it's using vue.js. I've made a custom vue component that need's to change data within another component.
That other component lives in the node_modules directory so I can't change the component code. The component is not using events so I can't change the data with that.
I was wondering is it possible to change data within another component without using events?
I don't know the code of the component where you want to set the data.
But if it has a ref you can do something like:
updateData: function() {
this.$refs.xyComponent.clicked = true
}
Notice that the $refs are only populated after the render process.

Override ember component template with template from addon (in-repo)

I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.

Categories