We Keep Coding

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.

Angularjs component without module definition, components interaction

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?

Can't create new vue components

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

multiple reactDom.render calls in bundle.js

I had an issue yesterday that you can read about here and it relates. I thought that changing my directory name was messing up my react components, but I think I figured out the problem.
I'm building a web app with node/express/react and I'm rendering react server side and creating a bundle.js file to use client-side. I have multiple react components that I'm rendering on the page, but they're not all in the same 'react app'. Basically I have a few 'mini react apps' so each set of functionality has its own ReactDom.Render call.
for example, I have a form at the top for adding new items, that has its own render, and I have a list of items below that, that has its own render call. and both of these mini-components are bound to separate divs.
<div id='the-form'><%-form%></div>
<div id='the-list'><%-list%></div>
however, it looks like the component that comes first in the bundle.js is the one whose render call is working, the other component(s) render initially from the server-side rendering, but then there are no updates because the components are not re-rendering/updating.
is there a way to keep my approach but have these working?

Remove window.onLoad and just use ReactDOM.render alone.

How are multiple Components implemented?

I want to separate out the logic of my app which needs to call an OData service before the main execution can continue. I have other apps which need this behaviour implemented in the future, so if I can modularise that functionality into a component, it would be very useful.
I have Component.js for the main app, and I'd like to add a second component to be run first, which then loads the main component once the OData result has been received.
How do I load a Component, then get that Component to run the next one (in this case a UIComponent)?
It seems the sap.ui.component code automatically appends "Component.js' to the end of the name provided, so how do you have different Component files with different names?
var oComponent = sap.ui.component({
name: "MYAPP.Component2",
id: "componentId"
});
Returns error,
failed to load 'MYAPP/Component2/Component.js' from ./Component2/Component.js: 404 - NOT FOUND
Could anyone provide some example code of a UIComponent having a dependency of a Component, and the file structure of that part of the application?

You can build multiple components as separate entities and then have them listed as dependent components inside a master component for your project. In your main or master component you can list these secondary components under the metadata config's dependencies array. Each component is atomic to itself so each will have its own Component.js with routes and view path. We create nested components in this same manner and it works really well.