Now I want to build a autocomplete box but I'm unable to build as the image shown below. Please help me to fix this. THe default value for the room is 1 and the column should be allowed user to click on the option but not allowed them to type. Thank you.
<v-autocomplete
v-model="room"
:items="rooms"
label="room"
></v-autocomplete>
data() {
return {
rooms: ['1 Room', '2 Rooms', '3 Rooms'],
};
},
Using v-select is a better component to use if the user shouldn't be able to type anything in the selection box. The v-select API documentation lists a selection slot to customize the appearance of the selected item. Using this slot you can choose to show only the first character, which matches your requirements for "1 Room" to display as "1".
<template>
<v-select v-model="tempForm.roomCMS" :items="rooms" outlined label="Rooms">
<template v-slot:selection="{ item }">
{{ item.charAt(0) }}
</template>
</v-select>
</template>
<script>
export default {
data() {
return {
tempForm: {
roomCMS: 1
},
rooms: ['1 Room', '2 Rooms', '3 Rooms', '4 Rooms', '5 Rooms', '6 Rooms', '7 Rooms', '8 Rooms']
};
}
};
</script>
codepen demo
Related
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 want to use a vuetify calendar that highlights todays date, how would I get it in the data or set it as a variable in the data?
This is the example calendar code on the vuetify page. Calendar Page. This is the first example the week view.
<template>
<v-row>
<v-col>
<v-sheet height="400">
<v-calendar
ref="calendar"
:now="today"
:value="today"
:events="events"
color="primary"
type="week"
></v-calendar>
</v-sheet>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
today: '2019-01-08',
eventsMap: [
{
name: 'Weekly Meeting',
start: '2019-01-07 09:00',
end: '2019-01-07 10:00',
},
{
name: 'Thomas\' Birthday',
start: '2019-01-10',
},
{
name: 'Mash Potatoes',
start: '2019-01-09 12:30',
end: '2019-01-09 15:30',
},
],
}),
mounted () {
this.$refs.calendar.scrollToTime('08:00')
},
}
</script>
How can I get the current date and set it to a variable in the data something like this?
today: currentDate
For Vuetify calendar component, add the following to data: () => ({
today : new Date().toISOString().substr(0, 10),
Define a variable in the data section:
today: new Date()
This will give you today's date. Then you may use it in your component
Vuetify has a birthday picker. However i need this birthday picker in a for loop. How do i get this to work, i just started with vue and vuetify and can not get my head a round the $refs in combination of an index concept. And i think thats what is needed here. The script is working with errors in the $refs. The idea for the picker is first to select a year, than a month and then the day
<template>
<v-container>
<div v-for="n in 3">
<v-menu
ref="menu"
v-model="menu[n]"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-model="date[n]"
label="Birthday date"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
ref="picker"
v-model="date[n]"
:max="new Date().toISOString().substr(0, 10)"
min="1950-01-01"
#change="save"
></v-date-picker>
</v-menu>
</div>
</v-container>
</template>
<script>
export default {
data: () => ({
date: [],
menu: [],
}),
watch: {
menu (val) {
val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
},
},
methods: {
save (date) {
this.$refs.menu.save(date)
},
},
}
</script>
I have the same need/issue with this component. I'm searching for the answer as well so I can only make suggestions based on my experience with this issue.
I've tried your same approach here but with little success. I'm currently creating a separate BirthDatePicker component and trying to use the v-model example from this article Using v-model on Nested Vue Components to get each birth-date modeled to it's corresponding value within my 'people' array of objects.
Rough example:
people: [{name: '', dob: '', etc...},{name: '', dob: '', etc...}]
Quantity:
<select>
<option value="0">0</option>
<option
:value="x"
v-for="x in product.stock_count"
:key="x"
:selected="x == product.quantity"
>{{x}}</option>
</select>
Here, product.stock_count is holding the integer value for the total number of stock amount, and product.quantity is the selected quantity which is to be updated. I want to build the same selection
control with vuetify v-select
https://vuetifyjs.com/en/components/selects#api
Not using product object directly in the v-select, using an object property product.stock_count which has an integer value (eg. 5), now I want the v-select to have values from 1 to 5. And 0 when the product.stock_count returns 0.
<v-select :items="items"></v-select>
<script>
export default {
data: () => ({
//items: [from zero to product.stock_count],
}),
}
</script>
kindly help me out.
<template>
<v-select
v-model="selected"
:items="products"
label="Standard"
item-text="name"
item-value="id"
return-object
></v-select>
</template>
<script>
export default {
data: () => ({
products: [],
selected:{id:1,stock_count:5,quantity:5,name:'Product 1'}
}),
methods:{
getproductAPI(){
this.products= [
{
id:1,
stock_count:5,
quantity:5,
name:'Product 1'
},
{
id:2,
stock_count:10,
quantity:10,
name:'Product 2'
},
]
},
},
mounted(){
this.getproductAPI()
}
}
</script>
if your using object
try this:
<v-select
:items="items"
v-model="selection"
>
</v-select>
...
selection: 0
If you have other data (which it seems so based on your product. stock_count/quantity that you want to display you can use the item-text, item-value props.
I'm a very new at programming. I'm trying to figure it out how to bind the data to get the link :href work using store, vuex and bootstrap-vue table. I have spent 4 days for this, and now I'm dying. Please help.
books.js(store, vuex)
books: [
{
id: 1,
name: "name 1",
bookTitle: "book1",
thumbnail: '../../assets/img/book01.jpeg',
url: "https://www.google.com",
regDate: '2019-10'
},
{
id: 2,
name: "name2",
bookTitle: "book2",
thumbnail: "book2",
url: "http://www.yahoo.com",
regDate: '2019-10'
},
BookList.vue
<script>
export default {
name: "BookList",
components: {
},
computed: {
fields() {
return this.$store.state.fields
},
books() {
return this.$store.state.books
},
bookUrl() {
return this.$store.state.books.url
}
},
data() {
return {
itemFields: this.$store.state.fields,
items: this.$store.state.books,
//url: this.$store.state.books.url
}
}
};
</script>
<template>
<b-container>
<b-table striped hover :items="items" :fields="itemFields" >
<template v-slot:cell(thumbnail)="items">
<img src="" alt="image">
</template>
<template v-slot:cell(url)="items">
<b-link :href="bookUrl" >link</b-link>
</template>
</b-table>
</b-container>
</template>
The cell slot contains two properties you're generally interested in:
item (the current row, or, to be exact, the current item in items)
value (the cell - or, to be exact, the value of the current column within the item).
Therefore, considering your data, in the case of v-slot:cell(url)="{ value, item }", value is equivalent to item.url
Any of these would work:
<template v-slot:cell(url)="{ value }">
<b-link :href="value">link</b-link>
</template>
<template v-slot:cell(url)="slot">
<b-link :href="slot.value">{{ slot.item.bookTitle }}</b-link>
</template>
<template v-slot:cell(url)="{ item }">
<b-link :href="item.url">{{ item.bookTitle }}</b-link>
</template>
Working example here.
Note your question contains a few minor issues which might prevent your code from working (itemFields is referenced but not defined, not using proper getters, etc...). For details have a look at the working example.
And read the docs!