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
Related
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.
As you can see in the materialize docs, using this on a plain html file is quite simple: paste the html somewhere in the body, and paste the js initializer on a script tag. It works fine.
I'm wondering how I can use this on a vue component? I'm talking a .vue file with template, script, style sections.
You could try and call this code in one of Vue's lifecycle hooks (see this diagram to find out where exactly they're executed), you'll probably want to use mounted.
But keep in mind this isn't really a bulletproof solution. Vue may manipulate the DOM in different ways later and as such isn't necessarily compatible with Materialize. The best solution in these cases is always to find a framework-specific implementation of the components you're trying to use, e.g. Vue Material.
I would advice you to include initialize function to mounted() {...} section of a .vue single file component to make sure all HTML tags already exist.
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 was working on an EmberJS application developing.
I defined a route and a template for it
And there is a little button, which id is myBtn in that template
I wonder how and when i can reference that button in my route.js
If there is no way,i think i may wrote a single component and wrap it in that route(template),course,element reference in component is clearly and easily
Hope there is a hint for me
Thanks
In most cases there is no need for you to reference dom element (your button) in the route, your button and route should be loosely coupled it is how ember encourages building apps. Instead you should use actions/events to control your app or wrap it in component if you really need reference to dom.