I'm trying to use Buefy's tooltip with a content slot, so insted of using the label prop to set tooltip's text, I could use HTML tags to format my text.
I tried to check the component source code, and there is indeed a content slot, but it is not working. Here is my code:
<b-tooltip
position="is-left"
>
<template #content>
My <b>content</b> here
</template>
<b-input
v-on:keyup.native.enter="onEnter"
type="password"
v-model="password"
placeholder="Enter Password"
password-reveal
class="custom-input-style password-field"
></b-input>
</b-tooltip>
Check your buefy version, if it is below 0.9.0 then it won't work
Related
This is BaseInput.vue's template, as you know in Vue3 we have $attrs (fallthrough props) that we can specify where to bind prop value as below I bind it to element with the intention of customize css style for input element.
BaseInput.vue
<template>
<label :class="$style.wrapper">
<input
v-bind="$attrs"
:value="modelValue"
/>
<span :class="$style.label">
<slot name="label"></slot>
</span>
</label>
</template>
Then I call
<BaseInput
v-model="username"
:class="$style.field"
/>
<BaseInput
v-model="password"
:class="$style.field"
/ >
So basically the class field will be applied to <input/ > element in BaseInput.vue component thanks to v-bind='$attrs'.
But sometimes, I want to add css style for the wrapper element of BaseInput.vue (here is element).
For example:
margin-bottom: 32px;
I want the first has margin bottom = 32px, but the second one doesn't.
So what is the good way to achive that?
I just found a solution that we add a div wrapper for each but I think it's not really good idea. So please elaborate me.
I am using a plugin called Vue-Multiselect and have it working pretty good on my app. However, there is a functionality in the plugin that I do no want. How can I safely remove it?
Let me explain: CodeSandBox Collaboration Editor .
Note: To see this flow in action, choose EDIT next to ACME Widget and then search for an on existent user in the multiselect input box.
When a user is searched for in the multiselect input box, and if a match is found, the match pops up for the user to select. That is good. However, when a user is NOT found, there's a placeholder text that says the following: Press enter to create a tag . I do NOT want to give my users the ability to create new tags/options if the option does not exist. How can I remove that functionality from this component?
Here is my multi-select component code:
<multiselect
id="customer_last_name_input"
v-model="values"
:options="options"
label="lastname"
placeholder="Select or search for an existing customer"
track-by="uid"
:loading="isLoading"
:custom-label="customerSelectName"
aria-describedby="searchHelpBlock"
selectLabel
:multiple="true"
:taggable="true"
>
<template
slot="singleLabel"
slot-scope="props"
>{{ props.option.lastname }}, {{props.option.firstname}}</template>
<template slot="option" slot-scope="props">
<strong>{{ props.option.lastname }}</strong>
, {{ props.option.firstname }} —
<small>{{ props.option.email }}</small>
</template>
<!-- <template slot="noResult">Looks like this customer doesn't exist yet.<button class="btn btn-primary" type="button" #click="addCustomer">Add Customer</button></template> -->
</multiselect>
I found the answer. I simply remove the taggle=true prop from the multiselect component.
I'm using Vue with Vuetify and currently have a form with a group of radio buttons:
<v-radio-group label="Active?">
<v-radio name="active" label="No" value="0" v-bind:checked="active === 0"></v-radio>
<v-radio name="active" label="Yes" value="1" v-bind:checked="active === 1"></v-radio>
</v-radio-group>
On page load, active set to 1:
data: {
active: 1
}
I see the input has checked="checked" but the icon remains as "radio_button_unchecked" so doesn't appear to be checked:
<input aria-label="Yes" aria-checked="false" role="radio"
type="radio" value="1" name="active" checked="checked">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>
Image of vuetify radio button unchecked
If I click the radio button, it changes the icon to radio_button_checked, but on page load that doesn't seem to be happening. How can I get vuetify to load with radio_button_checked if the input it's associated with is checked?
The <v-radio> element does not support a "checked" attribute like <input type="radio"> does. Instead, the currently checked radio button is managed by the <v-radio-group> wrapper.
The following code should work:
<v-radio-group label="Active?" v-model="active">
<v-radio name="active" label="No" :value="0"></v-radio>
<v-radio name="active" label="Yes" :value="1"></v-radio>
</v-radio-group>
According to the Vuetify docs all selection components must include a v-model prop, in this case, v-model="active". The radio group will then have it's value dependant on the "active" variable in your data. If the "active" value equals one of the :value="..." props in the <v-radio> elements, that element will be checked. See also this codepen.
Don't forget to append a : before your value prop or it won't be bound by Vue.
I came across an instance where the v-model solution just wouldn't work with what I was trying to accomplish. I came up with the following work around using the off-icon prop:
<v-radio
:off-icon="item.active ? '$radioOn' : '$radioOff'"
/>
I am not able to use vue on blur event,
In my component I have a #change directive
<b-input :value="value" #change="validateEmail($event)" #input="$emit('input', $event)" ref="input" :state="state"/>
This is because #blur doesn't seem to work.
Bootstrap vue on:blur handler is not been called
This works partially when I am changing the input and hit tab, then works, but if I focus on the input and click tab without changing the input, it doesn't work.
I want to show a message that email is required in this case but I cannot.
You may use #blur.native with Bootstrap Vue inputs.
<b-input
:value="value"
#change="validateEmail($event)"
#input="$emit('input', $event)"
ref="input"
:state="state"
#blur.native="handleBlur"
/>
https://github.com/bootstrap-vue/bootstrap-vue/issues/1645#issuecomment-369477878
you can use #blur.native="function"
I am using elementUI's pagination component in my VueJS app.
I wish to replace the default 'Go to' text to 'Page' without altering the inner div:
<span class="el-pagination__jump">
Go to
<div class="el-input el-pagination__editor is-in-pagination">
<!----><input type="number" autocomplete="off" min="1" max="6" class="el-input__inner"><!----><!----><!---->
</div>
</span>
How can I do this? Do I have access to the DOM?
Thanks.
You can play with the localization settings. Since the default locale is Chinese, I assume you are already doing this in your main.js
import localeUI from 'element-ui/lib/locale'
import defaultLang from 'element-ui/lib/locale/lang/en'
localeUI.use(defaultLang);
So you have to clone the English locale, modify the el.pagination.goto value and then use this new locale.