Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
[
{
"id": 1,
"start_time": "10:00",
"end_time": "11:30",
"active": true
}emphasized text
]
Here is the working demo.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return {
selectedItems: [],
items: [ { "id": 1, "start_time": "10:00", "end_time": "11:30", "active": true },{ "id": 2, "start_time": "11:30", "end_time": "01:00", "active": true }]
}
},
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedItems"
:items="items"
filled
chips
color="blue-grey lighten-2"
label="Select"
item-text="start_time"
item-value="id"
multiple
>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
>
{{ data.item.start_time }} ~ {{data.item.end_time}}
</v-chip>
</template>
<template v-slot:item="data">
<v-list-item-content>
<v-list-item-title>{{ data.item.start_time }} ~ {{data.item.end_time}}</v-list-item-title>
</v-list-item-content>
</template>
</v-autocomplete>
</v-app>
</div>
Related
first of all, I'm not fully familiarized with vue, so maybe I'm just saying dumb things. I need to access a value from an object obtained by a v-for from another component prop. I have the following template code:
<v-sheet v-for="item in itemsArray" :key="item.id" class="d-flex px-md-8 px-sm-0 w-100">
<!-- icon -->
<v-avatar :color="itemTypesData[item.item_type.name].color" :size="iconHeight"
class="ma-1 flex-shrink-0">
<v-icon color="white" size="x-large">{{ itemTypesData[item.item_type.name].icon }}</v-icon>
</v-avatar>
</v-sheet>
Where itemTypesData is an enum containing specific properties for each item_type. The problem here is that when I try to access to the item.item_type.name enum element, it can't get that value. Is there any way to do it? I set the itemsArray as reactive and so, I'm sure that I'm missing something but I can't find what.ç
itemsArray content:
[
{
"id": 1,
"order": 0,
"version": null,
"item_type": { "id": 2, "name": "type1", "description": null }
}
,
{
"id": 2,
"order": 0,
"version": null,
"item_type": { "id": 1, "name": "type2", "description": null }
}
]
thank you!
I'm not sure how itemTypesData looks like, but you can look at snippet with my interpretation:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
itemsArray: [
{
id: 1,
order: 0,
version: null,
item_type: { id: 2, name: 'type1', description: null },
},
{
id: 2,
order: 0,
version: null,
item_type: { id: 1, name: 'type2', description: null },
},
],
itemTypesData: {
type1: { color: 'blue', icon: '1' },
type2: { color: 'red', icon: '2' },
},
iconHeight: 30,
}),
})
<link
href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-sheet
v-for="item in itemsArray"
:key="item.id"
class="d-flex px-md-8 px-sm-0 w-100"
>
<!-- icon -->
<v-avatar
:color="itemTypesData[item.item_type.name].color"
:size="iconHeight"
class="ma-1 flex-shrink-0"
>
<v-icon color="white" size="x-large"
>{{ itemTypesData[item.item_type.name].icon }}</v-icon
>
</v-avatar>
</v-sheet>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I have these combobox chips with a prob deletable-chips
<v-combobox
v-model="selectedCategories"
:items="attributeCategories"
item-text="name"
item-value="id"
label="Category"
multiple
chips
clear-icon="mdi-close-circle"
deletable-chips
v-on:change="changeCategory(selectedCategories)"
></v-combobox>
Is there a way to prevent a specific chip to be deleted? For example not show the remove button on a specific one? Let's say for Device and only allow Weather and Geo Location to me removed
Instead of using in-built delete method of v-chips. You can do the implementation via custom #click:close event. I created a working demo for you :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
model: [],
items: [
{
text: 'Weather'
},
{
text: 'Geo Location'
},
{
text: 'Device'
}
]
}),
methods: {
remove (itemText) {
if (itemText === 'Device') {
return;
} else {
this.model.forEach(obj => {
if (obj.text === itemText) {
this.model.splice(this.model.indexOf(obj), 1)
}
})
this.model = [...this.model]
}
}
}
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-combobox
v-model="model"
:items="items"
label="Select"
multiple
small-chips
>
<template v-slot:selection="{ attrs, item, parent, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close="false"
#click:close="remove(item.text)"
>
<span class="pr-2">
{{ item.text }}
</span>
</v-chip>
</template>
</v-combobox>
</v-container>
</v-app>
</div>
I have this select menu:
<v-select
dense
outlined
item-text="name"
item-value="id"
:items="frequencies"
v-model="frequency"
label="Frequency"
></v-select>
& I kept seeing this:
If I print it out it seems to contain correct value:
{{ frequency }} {{ frequencies }}
Hourly
[
{
"id": 1,
"name": "Hourly"
},
{
"id": 2,
"name": "Daily"
},
{
"id": 3,
"name": "Weekly"
},
{
"id": 4,
"name": "Monthly"
},
{
"id": 5,
"name": "Perpetual"
}
]
Why my select didn’t select Hourly as selected value?
Here's a live, working demo using your example.
Or, for a shortened version here:
// Hide Vue dev warnings, just for the demo
Vue.config.devtools = false;
Vue.config.productionTip = false;
// Demo Vue app, using vuetify
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
frequency: null, // ID of currently selected frequenct
frequencies: [ // List of values to display in the dropdown
{ id: 1, name: "Hourly" },
{ id: 2, name: "Daily" },
{ id: 3, name: "Weekly" },
{ id: 4, name: "Monthly" },
{ id: 5, name: "Perpetual" },
{ id: "XX", name: "Broken" },
],
}),
})
p.demo { font-size: 1.5rem; text-align: center; background: yellow; }
p.demo.init { background: aqua; }
p.demo.broke { background: hotpink; }
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<!-- v-select, from your question -->
<v-select
dense
outlined
item-text="name"
item-value="id"
:items="frequencies"
v-model="frequency"
label="Frequency"
></v-select>
Selected Frequency : {{ frequency }}
<!-- Display what's selected, just for the demo -->
<p class="demo" v-if="frequency && frequencies[frequency - 1]">
Frequency: {{ frequency }} ({{ frequencies[frequency - 1].name }})
</p>
<p class="demo broke" v-else-if="frequency">
Invalid Frequency Selected ({{ frequency }})
</p>
<p class="demo init" v-else>No value selected yet</p>
</v-container>
</v-app>
</div>
I am not sure what issue you are facing but label is not showing on select any option from the <v-select>. I created a sample code snippet for the reference, Can you please have a look and let me know if any further assistance required.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
frequency: null,
frequencies: [
{
"id": 1,
"name": "Hourly"
},
{
"id": 2,
"name": "Daily"
},
{
"id": 3,
"name": "Weekly"
},
{
"id": 4,
"name": "Monthly"
},
{
"id": 5,
"name": "Perpetual"
}
]
}),
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-select
:items="frequencies"
item-text="name"
item-value="id"
label="Frequency"
v-model="frequency"
outlined
></v-select>
Selected Frequency : {{ frequency }}
</v-container>
</v-app>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
I have a selectbox in vue that has initial v-model value and i want to show its value on the selectbox but actually i do not know how to do it .
i would really appreaciate if someone can help
new Vue({
el: "#demo",
data() {
return {
newRecordDurationName: '2min',
recordDuration: [
{ id: 1, name: "2 min" },
{ id: 2, name: "5 min" },
{ id: 3, name: "10 min" },
{ id: 4, name: "15 min" },
{ id: 5, name: "30 min" },
],
};
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" class="container">
<select
v-model="newRecordDurationName"
class="w-75 mr-auto text-dark radius-8 py-2"
name=""
id=""
>
<option
v-for="type in recordDuration"
:key="type.id"
:value="type.id"
>
{{ type.name }}
</option>
</select>
</div>
You need to set the id of the required value to your v-model (newRecordDurationName) not the name. check the below update code.
So if you want '2min' to be the default value then set 1, if you want '10 min' as default value then set v-model to 3,.. like that
new Vue({
el: "#demo",
data() {
return {
newRecordDurationName: 1,
recordDuration: [
{ id: 1, name: "2 min" },
{ id: 2, name: "5 min" },
{ id: 3, name: "10 min" },
{ id: 4, name: "15 min" },
{ id: 5, name: "30 min" },
],
};
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" class="container">
<select
v-model="newRecordDurationName"
class="w-75 mr-auto text-dark radius-8 py-2"
name=""
id=""
>
<option
v-for="type in recordDuration"
:key="type.id"
:value="type.id"
>
{{ type.name }}
</option>
</select>
</div>
Actually this is a mistake that i am setting id and showing data
if i give an id to v-model it will work
I have a v-data-table that already has the :search and :sort-by enabled. I have now created a select where I pull in my status from VueX. Accepted, Rejected. What I want to do is not only search or sort but when selecting from the drop down, accepted only the accepted values display in the table.
<v-select
v-model="selectStatus"
label="Status"
:items="statusData"
item-value="id"
item-text="name"
return-object
#change="filterStatus"
/>
Is this the correct way to setup the filter?
methods: {
filterStatus () {
console.log('This is where I am planning to add my custom filter')
}
}
This is my statusData:
userStatus : [
{
id: 0,
name: "Accepted",
},
{
id: 1,
name: " Rejected",
},
];
Or better to pass in the data:
{ text: 'Status', value: 'status.name', filter: value => {}},
To disable certain values to be selected add a disabled property to your items.
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [{
id: 0,
name: 'Accepted'
},
{
id: 1,
name: ' Rejected',
disabled: true
}
],
value: null
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
Value : {{value}}
<v-select
v-model="value"
label="Status"
:items="items"
item-value="id"
item-text="name"
return-object
/>
</v-container>
</v-app>
</div>
Documentation : props-disabled