I'm quite a newby using Bootstrap-Vue for a project,
I have a structure like this
<template>
<v-select>
<template slot="option" slot-scope="option">
<div class="d-center">
{{ option.name }}
</div>
</template>
</v-select>
</template>
and I want to put a <b-button></b-button> after the v-select closure, but I get an error, I'm not sure why honestly.
Vuetify has slots to append elements. There are several.
https://vuetifyjs.com/en/api/v-select/#slots
<v-select>
<template #append>
<v-btn>Your Button</v-btn>
</template>
</v-select>
Related
Passing a header component as a named slot into router-view. But router-view not exactly displaying it. Normally this was work in vue 2. But it's not with vue 3. Is the way doing it changed or is it impossible to do it now?
header component
<template>
<header id="g-header">
<figure>
<img id="logo"
src="#/assets/images/logo.jpg"
alt="The beautiful MDN logo.">
</figure>
<nav id="g-nav" class="flex justify-space-between">
<a v-for="(link, idx) in links" :key="idx"
class="flex justify-center align-center capitalize"
:href="link.val">{{ link.text }}</a>
</nav>
</header>
</template>
router-view component
<template>
<div id="moduleA" class="modules">
<router-view class="moduleA-children">
<template #header>
<app-header></app-header>
</template>
</router-view>
</div>
</template>
children view component
<template>
<div id="step1">
<slot name="header"></slot>
<div class="row">the named slot OR default slot not showing</div>
</div>
</template>
Is there a way to accomplish this? Or do I missing something here?
In Vue Router 4, <router-view> exposes the component to render as a v-slot prop, named Component, which would be used with the built-in <component> tag. You could pass any slots to the component within that <component> tag:
<router-view v-slot="{ Component }">
<component :is="Component">
<template #header>
<app-header></app-header>
</template>
</component>
</router-view>
demo
I'm using last version of vuetify and trying to figure out how to make slots work. Documentation about select may be find here
VSelectWithValidation
<v-select v-model="innerValue" :error-messages="errors" v-bind="$attrs" v-on="$listeners">
<template slot="selection" slot-scope="data">
{{ data.item.name }}
</template>
<template slot="item" slot-scope="data">
{{ data.item.name }} - {{ data.item.description }}
</template>
</v-select>
TestComponent
<VSelectWithValidation
rules="required"
:items="items"
v-model="select"
label="Select">
// I WOULD LIKE SLOTS TO BE AT THIS LEVEL
</VSelectWithValidation>
Basically, I would like the slots to be customized so I need to move them out of the VSelectWithValidation component to be set on the TestComponent
I tried different variations with no success.
https://codesandbox.io/s/veevalidate-components-vuetify-u11fd
VSelectWithValidation
You need to create slot inside your template slot item and bind scope data to able to use from other component ..
<template slot="item" slot-scope="data">
<slot name="item" v-bind="data"></slot>
</template>
TestComponent
You can access that slot by writing v-slot:YourSlotName="hereIsBindData"
<template v-slot:item="data">
{{ data.item.name }} // you can code here whatever you like
</template>
In vue, we have got directives v-if which needs to be attached to element.
Is there a way to use conditionals without attaching them to anything like the mustachejs way?
I am looping through an array of words and it is adding div's in every word which is annoying
Here is my template
<div v-for="(str, index) in reference" :key="index">
<div v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</div>
<div v-else>
{{str}}
</div>
</div>
I would be nice if i could do it like this:|
{{if true}}
something goes here
{{else}}
other thing goes here
{{\if}}
Here is your code but using the < template > tag
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
Here is a example from the official Vue documentation:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
More informations: https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key
You can also use a Method and use normal Javascript into the < script > at the bottom of your file
Hope this helped, cheers
you could use the 'template' like so:
<template v-if=patternIncluded(str)>
//code
</template
<template v-else>
//code
</template>
UPDATE so like this
<div-for="(str, index) in reference" :key="index">
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
</div>
I'm trying to bind data to b-input inside a b-table however, changes to the input value will not propagate to the items of the table.
Here is my code so far:
<template>
<div :class="`col-${fields.length}`">
<h6 class="text text-center">{{header}}</h6>
<b-table
:items="items"
:fields="fields"
>
<template v-for="field in fields"
:slot="field.key" slot-scope="data">
<b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.value"
></b-form-input>
</template>
</b-table>
</div>
</template>
<script>
export default {
props: [ "header", "fields", "items"]
}
</script>
Basically all I want, is to change the values of items everytime I change the corresponding value of a b-input.
But itemswill never change...
What am I doing wrong here?
The solution is to use the items directly instead of using the data.value.
<template v-for="field in fields"
:slot="field.key" slot-scope="data">
<b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.item[field.key]"></b-form-input>
</template>
I have used <template slot="option" slot-scope="option"> for custom label in v-select. Here, everything is working fine. The custom label is working fine when the options are opened as shown in the screenshot here: http://prntscr.com/kluu7p but the custom label is not working for selected option or when the select is closed: http://prntscr.com/kluudy .
Here is the snippet I have used to use custom template in v-select:
<v-select #input="updateShippingCharge"
v-model="selected"
:options="options">
<template slot="option" slot-scope="option">
<span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
{{ option.label }}
</template>
</v-select>
Add another template with attribute slot="selected-option".
<template slot="selected-option" slot-scope="option"></template>
The final code should look like this:
<v-select #input="updateShippingCharge"
v-model="selected"
:options="options">
<template slot="option" slot-scope="option">
<span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
{{ option.label }}
</template>
<template slot="selected-option" slot-scope="option">
<span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
{{ option.label }}
</template>
</v-select>