I have two modules like education and transport. I want to create modules and components for these. How to create a perfect folder structure for these. If anyone knows please help.
education
->school
--> 1std component
--> 2std component
--> 3std component
->college
--> arts component
--> engg component
--> diploma component
transport
->cycle
--> small component
--> medium component
--> large component
->bike
--> pulsar component
--> honda component
--> hundai component
Demo: https://stackblitz.com/edit/angular-ivy-atpxot?file=src%2Fapp%2Fapp.module.ts
May be following folder structure would be useful for you!
-app
-shared
-services
-pipes
-components
-models
-modules
-education
-components
-school
-college
-models
-education.model.ts
-services
-education-service.ts
-education.component.ts // this component should act like a container
-education.component.html
-education.component.module.ts
-education.component.route.ts
-transport
-components
-cycle
-bike
-models
transport.model.ts
-services
transport.service.ts
-transport.component.ts // this component should act like a container
-transport.component.html
-transport.component.module.ts
-transport.component.route.ts
-app.component.ts
-app.component.html
-app.module.ts
-app-routing.module.ts
Above folder structure gives a kind of micro-service architecture as well where each module having its own services/dependencies.
Related
Our product has multiple customers, and each have their own customer-specific modifications.
Is there a way in a Vue2 template of an SFC to conditionally include or exclude other components at the time it's built, based on a build environment variable?
It looks like I can use something like webpack-conditional-loader to conditionally include/exclude JavaScript code at build-time, but is there an equivalent for the template code?
eg. something like this:
<template>
<##if process.env === 'CustomerA'>
<customer-a-dialog></customer-a-dialog>
</##if>
<##if process.env === 'CustomerB'>
<customer-b-dialog></customer-b-dialog>
</##if>
</template>
Thanks,
Spanners
you can use the following library which can allow conditional preprocessing for html/vue template code:
js-conditional-compile-loader
Hope it helps!
I have a child component that wraps a 3rd party video component. How do I listen to all events emitted from this child component?
<event-emitter
v-on:play="handleEvent"
v-on:stop="handleEvent"
v-on:ad-pause="handleEvent"
v-on:ad-play="handleEvent"
v-on:video-quartile-25="handleEvent"
v-on:video-quartile-50="handleEvent"
... this could many more lines ...
></event-emitter>
an event could look like this { type: "play", time: 28, ... }
Currently I have this
<event-emitter v-on:emitter-events="handleEvent"></event-emitter>
Inside the <event-emitter> I consolidate all the emitted events as single event, with a type property. There's a draw back now because the handleEvent function is likely to become long switch statement. Is there a means to be more declarative?
E.g
<event-emitter
v-on:listen-to-all-events="normalHander"
v-on:something-unusal-has-happend="aHandlerForThisVariationOfEvent"
></event-emitter>
In the end I just wrote it all inside the parent component, where the <parent> acted as a controller to the rest app. Not declarative as I would hoped — and definitely doesn't answer the question though. I don't think it's possible as described.
That event bus link that #Gander provided, is still useful though.
<parent> <-- I handle the EmitterEvents
<somthing-else />
<event-emitter v-bind:emitter-events="handleEmitterEvents" />
<another-component />
</parent>
I loop functional components in the transition-group, and because I didn't pass a key reference to the root element of the tag component to the tag component.
But how does a single file component pass the context.data?
The sample link
https://codesandbox.io/s/rjjmpvwm4n/
https://github.com/vuejs/vue/issues/7777
The <tag> component needs a key to use as its child <span>'s id.
Since <tag> is a functional component, you will have to access to the data via the data. prefix.
So, since you are using <tag v-for="item in list" :key="item"></tag>, inside the <tag>'s template, you can access the key (of context.data) automatically using data.key:
Add :key="data.key" in tag.vue:
<template functional>
<span :key="data.key">tag content</span>
</template>
Demo CodeSandbox: https://codesandbox.io/s/wxmvxnojl?module=%2Fsrc%2Fcomponents%2Ftag.vue
Using v2.2.2. I have the following structure in my VueJS app. How can I access all of the Account components from a method on my Post component? The number of Accounts is dynamic - I want to grab all of the loaded Account components and iterate over them.
I know it's got something to do with $refs and $children, I just can't seem to figure out the right path.
<Root>
<Post>
<AccountSelector>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
</AccountSelector>
</Post>
</Root>
https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs
Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile
When ref is used together with v-for, the ref you get will be an array
or an object containing the child components mirroring the data
source.
Basically inside AccountSelector.vue you can do this.$refs.anAccount.map(account => doThingToAccount(account))
Edit
The above answer is for accessing a direct child.
Currently there is no way to access a non direct parent / child component with $refs. The best way to get access to their data would be through events https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication or by using Vuex (Which i would recommend).
Non direct parent - child communication is very tricky without 1 of these 2 methods.
You can access nested components data using $refs and if you want to access the refs inside of it you first have to target the first element of the first refs ([0])
example: parent.$refs[0].$refs.anAccount
I have created my Apache Velocity template under /resources/fileTemplates/internal/myTemplateClass.vm and would like to use it through:
final JavaDirectoryServiceImpl javaDirectoryService = new JavaDirectoryServiceImpl();
javaDirectoryService.createClass(myPsiDirectory,
"MyClassname",
"myTemplateClass");
So I added the following in my plugin.xml:
<extensions defaultExtensionNs="com.intellij">
<!-- Add your extensions here -->
<internalFileTemplate name="myTemplateClass"/>
</extensions>
However when I run my plugin it claims that it did not find a template with the name "myTemplateClass". I assume it is cause I haven't linked to the file perse. Where should I link this?
Thanks
If you have an <internalFileTemplate> with the name of "myTemplateClass" and you want to use it to create a Java class, the template needs to be stored as fileTemplates/internal/myTemplateClass.java.ft. So you need to change the extension of your file.