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.
Related
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>
I'm using VueJS with the Vue Router and a js uniform module to modify form elements like select, checkboxes, etc to wrap these elements in a new element to improve the way we can style them.
How can I efficiently execute this module after I changed route and my components are mounted?
I could manually initialize the module in the mounted function for every component/view but that would be crazy.
Adding a route watcher on the VUE instance kind of works but this is being triggered before my components are mounted so the HTML I need to modify is not there yet.
What is the best practice solution for this problem in VueJS?
Perhaps a global mixin would work.
Here's the documentation: https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin
I'm a newbie to angularjs, trying to add some functionality to angularjs codebase
(angularjs 1.5 with angularjs material)
I don't see any module definitions angular.module in the components.
All components js files start with class nameController and end with an export export const namrComponent.
What is the proper way of adding a component in such a case?
I mean how do you tweak an example like this to fit in the codebase.
I tried creating a component under app folder and adding it to index.module.js but it doesn't seem to work.
I get errors saying The controller with the name 'nameOfMyComponent' is not registered
I'm also trying to put md-switch in one component (FirstComponent), and when its ng-change is fired I want another component (SecondComponent) to create md-dialog with md-list in it.
(SecondComponent) dialog will show a list of items with checkboxes, on hitting a submit button it will send the selected items to api; and return a success message to the (FirstComponent) to update the md-switch.
Is this flow possible? I mean the communication between components?
How to call one component from the other?
For some reason I can't register new components. I got a few of them and when I try to register new one I get:
Unknown custom element: <store> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
This is my app.js file:
Vue.component('example', require('./components/Example.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('loginmodal', require('./components/LoginModal.vue'));
Vue.component('products', require('./components/Products.vue'));
Vue.component('store', require('./components/Store.vue'));
And Store.vue is basically duplicated Example.vue so no point in posting that. I tried using already created components on page like register for example and it works just fine for some reason. You should also know that I'm using Laravel where Vue is pre-included and already set up by default with example component already created.
Here is my guess: you are using the component store in one of the other components listed above before registering it globally.
This could probably be adressed by changing your registering order, but I would advise you to register them locally to each component instead.
See: https://v2.vuejs.org/v2/guide/single-file-components.html
I m actually developping an application using Fluxible and Reactjs.
I need to create inside of this app (already using a router) dynamic subroutes inside of a parent component.
In fact, my component is, globally a planning manager. We can see daily, weekly, monthly etc... tasks.
It means that I have multiple components that can be replaced by each other inside of a parent component which can be .
So I was wondering if we can use something like an "inside component router". I mean this router should work only inside of the concerned component, like changing only the inside components of the parent component Planning.
This looks like a job for react router: https://github.com/rackt/react-router.