<designs-dialog
#change="dialogHandler"
#close="dialogs.designs = false"
:dialog="dialogs.designs"
:job="dialogJob"
v-if="dialogs.designs"
/>
<details-dialog
#change="dialogHandler"
#close="dialogs.details = false"
:dialog="dialogs.details"
:job="dialogJob"
v-if="dialogs.details"
/>
These 2 components are different in that one is more of a table and the other is more of a carousel. Nevertheless, it seems that there should be some way to DRY up the attributes as that part seems very similar between the 2.
Related
I am trying to create a questionnaire. I have an array of questions. Each question is an object. During the loop the <component :is> checks the component property inside the question object. If the property equals an Input for example then an input will be shown and so on.
This works for simple questions. However the last question requires a more complex layout. Here 'Please add items' needs to have two inputs and an add button. Once pressed a table will appear with each row displaying the values passed into the fields from above. At the moment I can't do this as I am looping though a sub set of questions.
There could be 1000+ questions eventually and I am not sure whether creating a component for each question is the right approach?
I know my current approach isn't right some how but I am completely stuck how to approach this. Is there a way of looping through data and providing unique layouts for each question? The data structure isn't set in stone so feel free to change it.
https://codesandbox.io/embed/blazing-wood-ifnxym?fontsize=14&hidenavigation=1&theme=dark
Within the v-for, you can wrap the elements in a <template>, and then just use v-if to determine which element is displayed.
For example :
<template v-for="question in question.questions" :key="question.id">
<Input v-if="quetion.type === 'text'" :question="question" />
<Radio v-if="quetion.type === 'choice'" :question="question" />
...
</template>
I am using Vue Instantsearch with multiple indices.
The query takes place in a ais-search-box component, looking through two indices simultaneously and displaying the results in an ais-autocomplete component.
This works well, however I can't find a way to assign each index a respective ais-configure component and therefore have to use the same filter for both indices.
As you image, with both indices containing different properties, this does not work as expected.
The docs mention this:
Since these are two dedicated indices, you can apply different parameters and widgets to the search. You can do it by passing different parameters to ais-configure, or mounting different widgets in each of the ais-index components. (source: https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/vue/)
It seems unclear how one would "pass different parameters to ais-configure"?
Could anyone please provide an example?
There's a github repo with an example a little further down on that same page. here's a deep link to the code in question:
https://github.com/algolia/doc-code-samples/blob/master/Vue%20InstantSearch/multi-index-hits/src/App.vue
You can nest your ais-config for the second search under the ais-index component. Something like:
<ais-instant-search
:search-client="searchClient"
index-name="instant_search_price_desc"
>
<ais-search-box v-model="query" />
<ais-configure
:restrictSearchableAttributes="['name']"
:hitsPerPage="8"
/>
<ais-hits>
<template slot="item" slot-scope="{ item }">
<h3><ais-highlight :hit="item" attribute="name" /></h3>
<img :src="item.image" />
</template>
</ais-hits>
<hr />
<ais-index :search-client="searchClient" index-name="instant_search">
<ais-configure
:restrictSearchableAttributes="['name']"
:hitsPerPage="2"
/>
<ais-hits>
...
Hi I'm trying to figure out how to use v-if on a iterated element which also uses v-for. I need to check if the current element has any of a series of classes, which are numbers.
so the classes of each article would be:
<article class="post-item post-guide 12 22 19 30 55">...
this is the HTML that renders all:
<article v-if="showIfHasClass" :class="'post-item post-guide ' + guide.categories.toString().replace(/,/g, ' ')"
v-for="(guide, index) in guides" :key="index">
<header>
<h1 class="post-title">
{{ guide.title.rendered}}
</h1>
</header>
</article>
I have tried with methods that check the class of all elements, that works, but i'm trying to use a clean Vue built-in solution with v-if without success, i'm not able to retrieve the class of this in a successful way.
Should showIfHasClass be a computed property? I have tried with that too... but it seems, I'm missing something along the way.
my data I have to check against is an array:
data:{
guides: [...]
selectedCategories: [1, 22, 33, 100, 30];
}
or maybe it is better to directly loop over the guides and check if they have the selectedCategory or not, then remove the element from the guides data array?
What is more effective?
Besides the option to create an additional filtered computed (effectively eliminating the need to use v-for and v-if on the same element), you also have a template level way of dealing with such edge-cases: the <template> tag.
The <template> tag allows you to use arbitrary template logic without actually rendering an extra element. Just remember that, because it doesn't render any element, you have to place the keys from the v-for on the actual elements, like this:
<template v-for="(guide, index) in guides">
<article v-if="isGuideVisible(guide)"
:key="index"
class="post-item post-guide"
:class="[guide.categories.toString().replace(/,/g, ' ')]">
<header>
<h1 v-text="guide.title.rendered" />
</header>
</article>
</template>
isGuideVisible should be a method returning whether the item is rendered, so you don't have to write that logic inside your markup. One advantage of this method is that you can follow your v-if element with a fallback v-else element, should you want to replace the missing items with fallback content. Just remember to also :key="index" the fallback element as well.
Apart from the above use-case, <template> tags come in handy when rendering additional wrapper elements is not an option (would result in invalid HTML markup) (i.e: table > tr > td relations or ol/ul > li relations).
It's mentioned here as "invisible wrapper", but it doesn't have a dedicated section in the docs.
Side note: since you haven't actually shown what's inside guide.categories, I can't advise on it, but there's probably a cleaner way to deal with it than .toString().replace(). If guide.categories is an array of strings, you could simply go: :class="guide.categories".
I think the most Vue way is to create a computed property with filtered items from selected categories, then use that in v-for loop (the idea is to move the business logic away from template).
computed: {
filteredItems(){
return this.guides.filter(e => this.selectedCategories.includes(e.category))
}
}
Also, as a note, it is not recommended to use v-if and v-for on the same element, as it may interfere with the rendering and ordering of loop elements. If you don't want to add another level of nesting, you can loop on a 'template' element.
<template v-for="item in items">
// Note the key is defined on real element, and not on template
<item-element v-if='condition' :key="item.key"></item-element>
</template>
I am work in company with big frontend team, and guys use multiple template tag in single file components. Before that I never see something like this, for me it bad practice. But head developers think that I am stuped, when I ask about that.
Can some one please explain me, when I must use it and why? and if it possible please give link to vue documentation.
And yes, we use vuetify.
example:
<template>
<VContainer>
<VRow>
<VCol>
<h2>
{{ title }}
</h2>
<p>
{{ subtitle }}
</p>
</VCol>
</VRow>
<Share />
<template v-if="p.length > 0">
<VRow>
<VCol>
{{ text }}
</VCol>
</VRow>
<VDivider/>
</template>
<template v-for="(t, index) in ts">
<VRow :key="index">
<VCol v-if="t.p.length > 0">
{{ text }}
</VCol>
</VRow>
<VDivider
v-if="index < t.length - 1"
:key="`divider-${index}`"
class="mx-3"
/>
</template>
</VContainer>
</template>
The <template> used here is just a way to handle loops or conditionals without inserting extra nodes into the DOM.
You could put the v-if or v-for directly on the <VRow> instead of on a <template> that wraps it, but sometimes that's undesirable -- if there are already other conditions there that you want to keep separate, or if you want to wrap multiple nodes in the same condition, as in your example where you have both a <VRow> and a <VDivider> contained in a single <template>.
It's not bad practice and has no undesirable performance effect at all. Your head developers should be better able to communicate that to you rather than calling you 'stupid'.
I think it does't matter use multiple template, We should not use div wrapper the condition render Component, the div will insert to DOM.
here is the official documemnt https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt
I have a simple component which is rendered by a click function, but it gets rendered twice, this is my code.
<SeeCompany
:is="create"
v-bind:companyId="companySelected"
#closeChild="closeModule"
/>
when i clicked in the button i change the create value to 'SeeCompany' so it gets mounted, but it repeats the same component text twice on the screen.
<b-button block
#click="create = 'SeeCompany'"
class="m-sides"
variant="outline-primary">
Ver
</b-button>
here is the image:
EDIT: Here is the code in the mounted
export default class SeeCompany extends Vue {
#Prop({ default: 0 }) private companyId !: number;
constructor() {
super();
}
private mounted() {
console.log(this.companyId); --> This is consoling two ceros (0) and the passed value for instance = 1;
}
}
There are two main uses for is.
Working around limitations in in-DOM templates.
Dynamic components.
For more information see https://v2.vuejs.org/v2/api/#is.
We can ignore the former case as it isn't relevant here.
Typically the second case looks a bit like this:
<component :is="childName" />
Here childName is a property of the component and determines the name of the child component to use. In your example you called it create.
The actual tag name used in the template doesn't really matter. It is common to use the dummy tag <component> for this purpose to avoid misleading future maintainers who may not immediately notice the :is. Whenever you see <component> you know you're in a dynamic component scenario.
When we talk about dynamic components it is important to appreciate exactly what we mean by 'dynamic' in this context. We are specifically talking about which component to use. We are not talking about determining whether or not to create the component in the first place.
In the code in the question the value of create is initially set to an empty string, ''. This is then passed to :is. If you inspect the DOM you'll find that this creates a comment node. While this does make some sense I am unclear if this is officially supported. I've not seen this behaviour documented anywhere and I suspect you may be getting lucky by falling down an internal code path that's intended for other things. It is not something I would be confident relying on in future versions of Vue.
The specific code of interest is:
<SeeCompany
v-bind:is="create"
v-bind:companyId="1"
/>
<SeeOther
v-bind:is="create"
v-bind:companyId="1"
/>
So if you inspect the DOM when create is '' you should find two comment nodes.
When create gets set to SeeCompany this is equivalent to:
<SeeCompany
is="SeeCompany"
v-bind:companyId="1"
/>
<SeeOther
is="SeeCompany"
v-bind:companyId="1"
/>
In turn this is equivalent to:
<SeeCompany
v-bind:companyId="1"
/>
<SeeCompany
v-bind:companyId="1"
/>
The result is the creation of two SeeCompany components. The original SeeOther tag is irrelevant here. This is why, as noted earlier, the convention exists to use a <component> tag to avoid being misleading.
Of course this isn't what you actually wanted the code to do. I'm unclear what the target behaviour is so I'm going to cover a few variations.
If you just want to show the components conditionally you'd use v-if instead:
<SeeCompany
v-if="create"
v-bind:companyId="1"
/>
<SeeOther
v-if="create"
v-bind:companyId="1"
/>
Usually you'd want create to be a proper boolean, false or true. So set the initial value to false with #click="create = true".
Of course this would show both SeeCompany and SeeOther at the same time. That may not be what you want either. Perhaps you only want to show one at once. For that you might do something like this:
<SeeCompany
v-if="create === 'SeeCompany'"
v-bind:companyId="1"
/>
<SeeOther
v-if="create === 'SeeOther'"
v-bind:companyId="1"
/>
Here the initial value of create should be a falsey value of some kind, possibly '', with #click="create = 'SeeCompany'" and #click="create = 'SeeOther'" on appropriate buttons.
If the props for the components are all the same, and especially if there are more than two components involved, you could try to simplify this using is:
<component
:is="create"
v-if="create"
v-bind:companyId="1"
/>
This is shorter but arguably not as clear.