I have vuetify select component as follows:
<v-select
class="ml-4"
v-model="selectedProjects"
:items="projects"
item-text="name"
item-value="id"
chips
:menu-props="{ maxHeight: '400' }"
label="Select Projects"
multiple
hint="Select projects to overlay"
persistent-hint
></v-select>
"projects" is an array of objects, and thus I can reference name and id in the item-name and item-value fields. At the moment selectedProjects is just an array of ids, but I want it to be an array of the actual selected objects contained in projects. How can I do that?
You should be able to get the selected objects by setting the return-object prop, which the Vuetify docs describes thusly:
Changes the selection behavior to return the object directly rather
than the value specified with item-value
Does this work?
<template>
<v-select :items="selectProjects" v-model="selectedProject" #change="filterMe" />
</template>
<script>
export default {
data() {
return {
selectedProject: 1,
projects: [
{ id: 1, name: "John Doe", artist: "Some artist" },
{ id: 2, name: "Doe John", artist: "Some artist" }
]
};
},
computed: {
selectProjects() {
return this.projects.map(project => {
return {
value: project.id,
text: project.name
};
});
}
},
methods: {
filterMe() {
let item = this.projects.filter(
project => this.project == project.id
)[0];
console.log(item);
}
}
};
</script>
When you select an option, it will use the Object ID as v-model but display text as the select value, you should be able to filter the ID after if needed.
Related
Well the scenario is when the selectedFruits is having some element then I need to show "Fruits Selected" and If there is no fruit selected it should display "Select Fruits" in the select. Below is my template and the data I am using. So basically it won't show the fruits selected but display the messages mentioned above in the v-select dropdown. I am new to the vue js, so wondering whether this is possible or not? or is there any alternate way to achieve the same scenario.
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="name"
multiple
/>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>
Well, I found that there is an option called selection which we can use with v-slot through which I am able to achieve the desired result. Below is the changes I made in my code:
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="Select Fruits"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0">{{
item && "Fruits Selected"
}}</span>
</template>
</v-select>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>
I am facing one problem while working with v-select component. V-select component is not showing selected item... It is showing options in dropdown but after selecting it is showing blank in select box.
This is the problem-
Dropdown is showing.. but not showing anything after selecting.
Like this.. It is blank.
Here is my code
<template>
<div>
<v-select
label="broadcast"
v-model="broadcast_"
:options="broadcasters"
:reduce="(broadcast) => broadcast.id"
>
<template v-slot:option="option">{{ option.name }}</template>
</v-select>
</div>
</template>
<script>
import Vue from "vue";
import vSelect from "vue-select";
Vue.component("v-select", vSelect);
export default {
data() {
return {
broadcasters: [
{
name: "ABC Live",
id: 1,
},
{
name: "Disney",
id: 3,
},
{
name: "24x7 Broadcast",
id: 4,
},
],
broadcast_: "",
};
},
watch: {
broadcast_(val) {
console.log(val); //It prints desire data (i.e broadcast id)
},
},
};
</script>
I don't know exactly what you wanted with your :reduce statement.
But if you change your code where
label="broadcast"
to
label="name"
or
label="id"
You will get the text in the selectbox
I'm running again another issue on my code, that although I can save the v-select component. I have 2 of these, the another is good in which the type items are object. The problem is by clicking edit button and passing value from child component to parent component, when I console the issue in edit method, I can see the output in console but it does not display on the imported component which is claimsdropdown. And when I update the another v-select imported component named type, the claimsdropdown value is passing null, that although it has already value in it based on fetching from database.
Here is my v-select component stuff:
<template>
<v-select
:items="items"
item-text="text"
item-value="value"
v-model="selected"
return-object
:menu-props="{ bottom: true, offsetY: true }"
append-icon="fas fa-chevron-down"
placeholder="Claims"
outlined
dense
/>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "ClaimsDropdown",
data: () => ({
items: [
{
text: "Yes",
value: true
},
{
text: "No",
value: false
}
]
}),
computed: {
...mapState({
selected: state => state.projects.selected
}),
selected: {
get() {
return this.$store.state.projects.selected;
},
set(item) {
this.$store.commit("projects/SET_SELECTED", {
selected: item.value
});
this.$store.commit("projects/SET_FILTER_IS_CLAIMED", {
is_claimed: item?.value
});
}
}
}
};
</script>
<style scoped></style>
Parent Component:
<v-row>
<v-col cols="4">
<ClaimsDropdown v-model="this.selected.claim" />
</v-col>
</v-row>
on my computed:
computed: {
...mapState({
selected: state => state.projects.selected
})
}
and on method edit:
this.selected.claim = getFilterPresetsData.filters.claimed;
console.log({checkingClaim: this.selected.claim}); //display whatever the value from database.
Vuex: projects >name of vuex store
state: selected: null
my brain got drain by this one.
I want to make a default value of the select option using vue.js
here is my code
<v-select
v-model="contact.title"
:options="['Mr','Mrs','Ms']">
</v-select>
and
export default {
props: {
contact: {
type: Object,
required: true,
},
titles: {
type: Array,
required: true,
},
},
};
thanks
Try this.I think this will work.
<v-select
v-model="selected"
:options="options">
</v-select>
data: () {
return {
selected: 'Option 1',
options: ["Option 1","Option 2","Option 3"]
}
},
Mutating a prop is not best practice in vue.
You could do it like:
<v-select
v-model="selected"
:options="['Mr','Mrs','Ms']">
</v-select>
data: function () {
return {
selected: '' || 'defaultValue'
}
},
This way you are not mutating the prop and you easily can set a default value.
If you want to pass the data to the parent look at:
Pass data to parent
I'm trying to create a simple card component CustomCard.vue and re-use it on HomeComponent.vue page with specified data, so I've created a loop and put the needed data in cards: []
I don't know why it doesn't work. I can see the 3 elements on the page but they are displayed with the default values of the component, instead of taking the data from the cards:[].
HomeComponent.vue:
...
<custom-card v-for="n in cards" :key="n">
<img :src="n.cardImage" alt="">
<p>{{n.cardDesc}}</p>
</custom-card>
...
<script>
export default {
data() {
return {
cardImage: "",
cardDesc: "",
cards: [
{id: "1", cardImage: "../src/assets/img1.jpg", cardDesc: "some description 1"},
{id: "2", cardImage: "../src/assets/img2.jpg", cardDesc: "some description 2"},
{id: "3", cardImage: "../src/assets/img3.jpg", cardDesc: "some description 3"}
]
}
}
}
</script>
CustomCard.vue:
<template>
<div>
<img :src="cardImage" alt="">
<p>{{cardDesc}}</p>
</div>
</template>
<script>
export default {
data () {
return {
cardImage: "../src/assets/default.jpg",
cardDesc: "default description text"
}
}
// props: ['cardDesc', 'cardImage']
}
</script>
I want these values below to be the default component values just as a placeholder (so I've put them in components data):
cardImage: "../src/assets/default.jpg",
cardDesc: "default description text"
If I pass the props out, I get an error: [Vue warn]: The data property "cardImage" is already declared as a prop. Use prop default value instead.
So I commented it out for now.
I've registered the CustomCard.vue globally in index.js:
Your component has no slots so there's no reason to include any content.
Seems to me you just need
<custom-card v-for="card in cards" :key="card.id"
:card-desc="card.cardDesc"
:card-image="card.cardImage" />
Note the key is set to the actual unique identifier for each iterable element.
You should of course un-comment the props declaration and remove the conflicting data keys from your component. As mentioned in the error message, you can also set default values
export default {
props: {
cardDesc: {
type: String,
default: 'default description text'
},
cardImage: {
type: String,
default: '../src/assets/default.jpg'
}
},
data () { // probably don't even need a data property
return {}
}
}