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!
Related
My App.vue has a V-for to create a Card Component, this Card receives the data through a Prop. Everything works fine except for the image.
In my App.vue
<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>
The urls that my json provides
"logo": "./assets/logos/scoot.svg",
At the moment the only solution I have found is to put the images in the static folder and use this code so that you can at least see it in production. Help me please :( I haven't made any progress in 2 days
<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">
I would like to know how to make it work if they are in assets or in static
If you want to load them by webpack you can simply use :src="require('path/to/file')". Try this code:
<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">
Your project is built, and image paths in the build can change after the build process.
You can try using the require() function. It works at build time:
// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />
This way, webpack will know it needs to change the path to post-build one.
You may want to check this question out: https://stackoverflow.com/a/57350255/1722529
I want to write unit test on vue-treeselect. I followed the testcases written in the repository. There they have taken wrapper.vm.forest.nodemap to find the options but when i try it is giving forest "undefined".
Does anyone have idea how to get wrapper.vm.forest in the wrapper.
I have used treeselect something like this
<treeselect
v-model="selected"
data-test="treeselect"
:multiple="true"
:options="options"
placeholder
value-consists-of="LEAF_PRIORITY"
:required="true"
:show-count="true"
:default-expand-level="1"
>
I gave data-test="treeselect" to find this component than in testcase used like this:
expect(wrapper.find('[data-test="tenants"]').vm.forest.selectedNodeIds).toEqual(["anything"]);
i have use html2-pdf in VueJS project in terms of generate pdf file from HTML.
My problem is, is there way to use VueJS variable like {{ variableName }} inside tag <section slot="pdf-content"> ?
Because i have tried but it not print out the value of the variableName. Is there any way to use variable inside the tag of html2-pdf?
Thank you so much.
Thanks in advance for the help.
I'm using the Vue's dynamic component tag in an application.
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
The component list is provided via a computed property which I simply iterate over creating <component /> elements.
<component v-for="component in myComponents" :key="component" is="component />
The issue i'm running into is the components are loaded asynchronously and some components can take longer at times than others to load. Due to this sometimes the components load out of the desired order.
I was curious if anyone had a suggestion on how I might be able to force the components to display in a desired order?
You can try to use an ordered computed property, for exemple if you want to order your components by name.
In the template :
<component v-for="component in orderedComponents" :key="component" is="component />
In the script
computed: {
orderedComponents: function () {
return _.orderBy(this.myComponents, 'name')
}
}
This exemple is using Lodash but of course you can order it the way you want.
You can check the documentation : https://v2.vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter
Yes, you can enforce the order by setting :key to a number.
First, modify your for loop to use indexes:
v-for="(index, value) in myComponents"
Then set key to the index
:key="index"
This should keep the order in tact - if it doesn't, you could always create placeholders first then replace them in the runtime.
Supposed I have the following html only element:
<template bindable='value: Math.random()'>
${value}
</template>
<!-- In another component {Main} -->
<template>
<require from='./that-element'></require>
<that-element></that-element>
</template>
The result is an empty string in main component. The question is how can I define a default value for html only element?
EDIT: Default value for element will not work if an 2 bindings need to have the same unique default value. I can make it unique myself but then I have to do it manually. Was looking for something like Math.random()
The contents of bindable attribute on <template> tag is handled as comma-separated list of strings. Therefore, you won't be able to set default values there.
I can think of two approaches:
Set default values in parent viewmodel class and use explicit binding. Considering above scenario, this will work for you.
<that-element value.bind="someVarFromParent"></that-element>
In some really simple cases, when default value should be a static string, you can use JavaScript expressions within an interpolation.
${value || 'default value'}
Gist demo: https://gist.run/?id=f0698d5b0066c3674c29c40d850217dc
Just putting my 2 cents in here...I think Marton nailed it on the head with the html only solution. I generally use the value.bind method because I usually always have a vm along with my view. So, to simplify JayDi's response (which is a valid response), I've created a GistRun for you.
Basically, you'll create a custom-elem html file and a custom-elem js file. In the html file, you would have something like this:
<template>
<h1>${value}</h1>
</template>
and in the js file, you'd have something like this:
import {bindable} from "aurelia-framework";
export class CustomElem {
#bindable value = "default value";
}
Finally, you'd just require it in your main parent file like so:
<template>
<require from="./custom-elem"></require>
<custom-elem></custom-elem>
<custom-elem value.bind="'myVal'"></custom-elem>
</template>
I just added a default value for the custom element. You can leave it undefined if you'd like. Also, you can add as many properties as you would like. This is the simplest way to tackle this in my opinion, unless your situation lets you get by with the html only method.
Also, in this case, I'm using a string of "myVal". If you wanted to use a variable that you have in your parent vm, you would just take the single quotes off and use that variable name.
Here's the running Gist so that you can fool around with it:
https://gist.run/?id=2eb14ecd2b0b859fd5d1a33b5ee229bd
You can use || statement in html-only element for default value:
<template bindable="param1, param2, param3">
<h1>${param1 || 'default 1'}</h1>
<h2>${param2 || 'default 2'}</h2>
<h3>${param3 || 'default 3'}</h3>
</template>