I am trying to modify the output of an InstantSearch widget for Vue.
In the documentation (https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui) it says that using the scope-slot it will override the complete DOM output of the widget:
But it does not seem to be the case here. This is my code below using slot with a simple <tr> and <td> elements:
Instead of rendering a <tr> with <td> inside of it, I see here:
A div with a class of ais-Hits
A nested ol with a class of ais-Hits-list
A nested li with a class of ais-Hits-item
The output is this:
If I go to inspect element and I delete the elements I mentioned above (see how div, ol and li are deleted):
Then the result is correct:
Am I doing something wrong? Shouldn't slot override the DOM output and leave the rest to the developer to style?
Any help would be much appreciated!
You have to use the default slots rather than item. You'll have full control over the render.
<ais-hits>
<ol slot-scope="{ items }">
<li v-for="item in items" :key="item.objectID">
<ais-highlight :hit="item" attribute="name" />
<p>
<ais-highlight :hit="item" attribute="description" />
</p>
</li>
</ol>
</ais-hits>
Here is an example on CodeSandbox.
The ais-Hits will always wrap the default slot with a div (see GitHub for the explaination). The only alternative to avoid this issue is to create your own widget with the mixin createWidgetMixin:
<template>
<ol v-if="state">
<li v-for="item in state.hits" :key="item.objectID">
<ais-highlight :hit="item" attribute="name" />
<p>
<ais-highlight :hit="item" attribute="description" />
</p>
</li>
</ol>
</template>
<script>
import { createWidgetMixin } from "vue-instantsearch";
import { connectHits } from "instantsearch.js/es/connectors";
export default {
mixins: [createWidgetMixin({ connector: connectHits })]
};
</script>
Here is an example on CodeSandbox.
Although #Samuel Vaillant pointed me at the correct path, I believe the code below can help others with the same issue as me (populating HTML tables with Algolia results) without needing to create custom widgets:
<template>
<ais-hits>
<table slot-scope="{ items }">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.objectID">
<td>
<ais-highlight :hit="item" attribute="name" />
</td>
<td>
<ais-highlight :hit="item" attribute="description" />
</td>
</tr>
</tbody>
</table>
</ais-hits>
</template>
Related
When trying to fill a table with rows using v-for it is quite easy to map the v-for elements 1:1 with the rows like:
<template>
<table>
<tr v-for="item in items"><td>{{item}}</td></tr>
</table>
</template>
My question is: how can I create multiple rows (eg td elements) per item (see following pseudocode):
<template>
<table>
<nothing v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</nothing>
</table>
</template>
Here <nothing> should not be emitted in the DOM as a level, only <td> directly under <table>.
Is this possible?
In Vue.js, you can use tag <template>, it does exactly what you meant by nothing.
<table id="t1">
<template v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</template>
</table>
But alternatively, you can wrap these two lines into tbody tag to actually render it and group the lines in two, e.g., for styling.
In addition to Dmitry's solution, typically, you would want to loop your rows, and use blocks in the same td.
<table>
<tr v-for="item in items">
<td>
{{item.line1}} <br />
{{item.line2}}
</td>
</tr>
</table>
or
<table>
<tr v-for="item in items">
<td>
<div>{{item.line1}}</div>
<div>{{item.line2}}</div>
</td>
</tr>
</table>
I'm trying to declare and access an vue component inside a component slot.
The modal component will be creates several time and there it has to have an unique name but I don't no how I do that inside the slot.
using Laravel blade and vueJs
<template>
<table>
<thead>
<slot name="head"/>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<slot name="line" v-bind:item="item" />
</tr>
</tbody>
</table>
</template>
<list-component ref="teamMembers">
<template v-slot:head>
<tr>
<th>Name</th>
<th>Email-address</th>
<th>Role</th>
</tr>
</template>
<template v-slot:line="slotProps">
<td>
#{{ slotProps.item.name }}
</td>
<td>
#{{ slotProps.item.email }}
</td>
<td>
#{{ slotProps.item.role }}
</td>
<td>
<button #click="$refs.deleteItemModal#{{ slotProps.item.id }}">
Delete
</button>
</td>
<modal-component ref="deleteItemModal#{{ slotProps.item.id }}">
</modal-component>
</template>
</list-component>
How can declare and call modal component?
If I use it like this
<button #click="$refs.deleteItemModal">
and
ref="deleteItemModal"
it works but gives me always the same component.
Please advise me how I can create an unique ref to create something like this 'deleteItemModal' + slotProps.item.id
You can try like this:
<modal-component :ref="'deleteItemModal' + slotProps.item.id">
</modal-component>
Static value should be covered with quotation mark and can use + to concat any dynamic value with the string like in javascript.
To call openModal method of that ref component, create method in modal-component component
deleteItem(itemId) { this.$refs['deleteItemModal' + itemId].openModal() }
and then change for button click event
<button #click="deleteItem(slotProps.item.id)">
Consider the following in a component snipet:
<tr v-for="row in rows" :key="row[rowKey]">
<td v-for="col in cols">
<slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
<template v-else v-html="formatField(row, col)"></template>
</td>
</tr>
Above I want to render a slot if given and if not to render a string returned by a formatting function unescaped. This did not work because I found out that v-html does not work with templates. The following works but you need extra unnecessary div tags that I don't want:
<td v-for="col in cols">
<slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
<div v-else v-html="formatField(row, col)"></div>
</td>
It would be nice if this still worked but has been deprecated:
<td v-for="col in cols">
<slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
<template v-else>
{{{formatField(row, col)}}}
</template>
</td>
The only other option I am left with is this but because there is no where to put the v-else I made the formatField() return nothing if a slot is given:
<td v-for="col in cols" v-html="formatField(row, col)">
<slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
</td>
formatField(row, col) {
if (col.bSlot) return; // also tried returning null, undefined, and ''
...
}
However now the slot doesn't render when one is provided. It seems like Vue ignores the slot if v-html is provided. So how do I not provide v-html when the col.bSlot is not provided?
You can place default value if slot is not given -
Fallback-Content
How about this:
1 <td v-for="col in cols">
2 <slot :name="col.bSlot" :row="row">
3 {{ formatField(row, col) }}
4 // <-- this is a comment
5 // <span v-html="formatField(row, col)"></span>
6 </slot>
7 </td>
I have a table where each "logical" row contains of two "markup rows".
<table class="table table-bordered">
<tbody>
<template v-for="(note, index) in notes">
<tr>
<td>
{{ moment(note.noteTime).format('YYYY-MM-DD HH:mm') }}
</td>
<td>
{{ note.locationName }}
</td>
</tr>
<tr>
<td colspan="2">
{{ note.noteText }}
</td>
</tr>
</template>
</tbody>
</table>
Is there a way generate this kind of table in vue without hurting html syntax (template element is not valid inside tbody)?
<template> does not generate a html element and thus will not interfere with html syntax.
There is actually a similar example inside the VueJS docs:
https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
Here is a jsFiddle to see the example from the docs in action. You can inspect the HTML syntax:
https://jsfiddle.net/50wL7mdz/545901/
I am trying to add a collapse component from bootstrap-vue into a table I am creating (Not bootstrap-vue table as find it easier to use plain table)
Can anyone tell me why this works as expected (But obviously opens every collapse component with the same ID)
<td>
<fa icon="bars" v-b-toggle.collapse2/>
</td>
</tr>
<td colspan="4">
<b-collapse id="collapse2" >
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
</td>
But this doesn't work, I know i have a unique id in case.id
<td>
<fa icon="bars" v-b-toggle="'collapse-' + case.id" />
</td>
</tr>
<td colspan="4">
<b-collapse id="'collapse-' + case.id" >
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
</td>
Many Thanks
You are not setting up a proper attribute binding in id="'collapse-' + case.id". It works in v-b-toggle="'collapse-' + case.id" case because as stated in the docs
Directive attribute values are expected to be binding expressions
In case of attributes you should use one of the following:
mustache
<div id="item-{{ id }}"></div>
v-bind
<div v-bind:id="'item-' + id"></div>
shorthand :
<div :id="'item-' + id"></div>