I have Vue drop-down.
<b-dropdown id="dropdown-1" text= "UserName" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
I need t change value of drop down. In my case it's UserName
I only found this way:
document.getElementById("dropdown-1").childNodes[1].innerHTML="new value"
I know it's not correct way but I didn't find correct way (via the API or something like that). This method does not work too:
text= "{{ variable }}"
Any ideas?
You can bind a dynamic value for text prop on <b-dropdown> and change it with the click event of <b-dropdown-item>
<b-dropdown :text="buttonTitle">
<b-dropdown-item #click="buttonTitle = 'new value'">Log out</b-dropdown-item>
</b-dropdown>
//script
data () {
return {
buttonTitle: 'Username'
}
}
MuratK is probably right, however I understand that you want to bind the dropdown item, not the parent element. You could do so with a v-for and text binding, like:
<b-dropdown id="dropdown-1" class="m-md-2" >
<b-dropdown-item v-for="item in items" v-text="item"></b-dropdown-item>
</b-dropdown>
Then, in your data define 'items' as an array of strings, such as ['log out', 'preferences', 'sign it']. You can also use this syntax, it does the same in your example:
<b-dropdown-item v-for="item in items">{{ item }}</b-dropdown-item>
To make text dynamic, you should bind it to a variable of your Vue component instance. An HTML attribute can be made dynamic and bound to a variable by using the : prefix before the attribute name (which is a shorthand of v-bind:)
Given :
<b-dropdown id="dropdown-1" :text="variable" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
In the component you should have the corresponding variable declaration :
data() {
return {
variable: '' // Variable initialisation
}
}
Related
I am working on a Vue app made with element UI and I have a bunch of el-select whose el-options need to have default values, meaning the form select fields already have one option pre-selected (of course the user can still choose other options).
I cannot find any attribute in the official doc https://element.eleme.io/#/en-US/component/select#select
But there should be a way to achieve this right?
This is my code
<el-form-item label="some label" prop="someprop">
<el-select v-model="form.status" filterable clearable>
<el-option
v-for="(item, index) in config.status"
:key="index"
:label="item"
:value="index"
how to have default option here??
>
</el-option>
</el-select>
</el-form-item>
Just put in the form.status the indexes that should be pre-selected. Vue will take care of the rest.
data(){
return {
form: { status: ['thisWillBePreSelected'], },
}
}
I am using VueJS and want to use right click event to display the dropdown list. But I have multiple dropdown so need to use dynamic ref. How can I show the dropdown that I want when right click?
<div class="info" #contextmenu="handler($event)">
...
<b-dropdown size="sm" text="…" variant="transparent" no-caret :ref="`dropdown-${id}`" :item1="this.item1" :item2="this.item2">
<b-dropdown-item #click="showDetails(item1, item2)">Send</b-dropdown-item>
</b-dropdown>
</div>
handler(e) {
this.$ref.dropdown.show();
e.preventDefault();
}
You can send another parameter to the handler function that will be the value of the $ref you want to open:
<div class="info" #contextmenu="handler($event, id)">
...
<b-dropdown size="sm" text="…" variant="transparent" no-caret :ref="`dropdown-${id}`" :item1="this.item1" :item2="this.item2">
<b-dropdown-item #click="showDetails(item1, item2)">Send</b-dropdown-item>
</b-dropdown>
</div>
handler(e, id) {
this.$ref[`dropdown-${id}`].show();
e.preventDefault();
}
By the way you can use .prevent modifier instead of using the e.preventDefault:
<div class="info" #contextmenu.prevent="handler(id)">
// your methods
handler(id) {
this.$ref[`dropdown-${id}`].show();
}
You could use e.target to get the element (button) you just clicked and after that use a switch statement to determine which dropdown to show.
How to pass attributes from component to slot?
This is in component
<navigation-link url="/profile">
Your Profile
</navigation-link>
Then in the template I want to use url
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot></slot>
</a>
<span class="active></span>
<div>
</template>
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
I think you want to put the text "Your Profile" in <slot></slot>
So, for this, you need to do this.
<navigation-link url="/profile">
<template slot="text">
Your Profile
</template>
</navigation-link>
And in the component, name the slot like this
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot name="text" />
</a>
<span class="active></span>
<div>
</template>
Probably, this work.
EDIT:
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
That is because, you are not declaring url in the component, you probably need to put
props: ['url'],
data() {
return {
propUrl: this.url
}
}
and in the template use this.propUrl
Regards
I'm generating a list of multiple input elements in which one is <el-select>. On changing this select menu, I'm getting value bounded with that select. But here, question is, I also want to get index/row number of the parent v-for items.
You can understand what I meant from the following code:
<el-form-item v-for="(domain, index) in Prescription.domains">
<div class="col-md-2" v-if="medicineIsSelected === true">
<small>Select Brand:</small>
<el-select v-model="domain.SelectedBrand" clearable placeholder="Select" #change="updateDropdowns"> <!-- Here I want to pass {{index}} also -->
<el-option
v-for="item in selectedMedicineMetaInfo.BrandName"
:key="item.value.name"
:label="item.value.name"
:value="item.value.rxcui">
</el-option>
</el-select>
</div>
</el-form-item>
As you can see from above code, I want to pass index in updateDropdowns.
I tried passing updateDropdowns(index), here I got the index number but lost the selected value of that dropdown. How can I pass both?
Here is the solution :
#change="updateDropdowns(index, $event)"
you can use $event to reference current event.
you can use custom event to manage this
<div>
<child #clicked="ongetChild"></child>
</div>
== child ==
watch your dropdown changes
export default {
watch: {
'domain.SelectedBrand':function(value) {
this.$emit('clicked', 'value')
}
}}
=== parent ==
export default {
ongetChild (value) {
console.log(value) // someValue
}
}
}
Use #change="updateDropdowns" in el-select tag
Use vue method:
updateDropdowns(index) {
this.selectedMedicineMetaInfo.BrandName[index-1]; // this gives selected option details
}
Hy I'm creating a simple dropdown using bootstrap-vue in vuejs. The Code in my component is like this :
<b-col sm="2">
<b-dropdown :text="selectedItem" v-model="selectedItem">
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here</b-dropdown-item>
</b-dropdown>
{{selectedItem}}
</b-col>
...
...
...
data () {
return {
selectedItem: ''
}
}
The problem is I can't select any item from dropdown item. Is there something that I missed here ?
Thanks in advance
Reference :
https://bootstrap-vue.js.org/docs/components/dropdown
This is a dropdown for navigation, not a select elem for forms. It does not support v-model and does not act like a form input.
You could use select instead, or if you still want to use dropdown as a form select, you could add click handler to control it.
For e.g.
<b-dropdown :text="selectedItem">
<b-dropdown-item #click="selectedItem='Action'">Action</b-dropdown-item>
<b-dropdown-item #click="selectedItem='Another action'">Another action</b-dropdown-item>
<b-dropdown-item #click="selectedItem='Something else here'">Something else here</b-dropdown-item>
</b-dropdown>
https://codesandbox.io/s/zky4j0zx94
I don't think a b-dropdown does what you think it does.
Bootstrap dropdowns are like menus. They don't have v-models.
What you seem to be needing is a Form Select instead:
<b-col sm="2">
<b-form-select v-model="selectedItem">
<option value="Action">Action</option>
<option value="Another action">Another action</option>
<option value="Something else here">Something else here</option>
</b-form-select>
<div>selectedItem: <strong>{{ selectedItem }}</strong></div>
</b-col>
...
...
...
data () {
return {
selectedItem: ''
}
}