I need to use the mask property for validating the input before it can be added to the list of selected items.
Code:
new Vue({
el: '#app',
data: () => ({
select: ''
})
})
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-combobox
v-model="select"
label="Add 3 digit numbers"
multiple
chips
mask="###"
></v-combobox>
</v-container>
</v-content>
</v-app>
</div>
Problem:
Now the result is the mask limit the length of the input but not the format and then when an element is added Vue throws an error
the value is read as string and is sliced character by character.
Objective:
My goal is that the user only can add values that match the mask.
Thanks.
There is bug in Vuetify when using the mask attribute with multiple. Remove multiple and it will work.
Related
I am using a b-table from BootstrapVue. However, when the array of objects for my table is empty, i want to show the table headers + 1 empty row, without any text in the cells of the table.
On BoostrapVue's b-table page, there is some explanation about showing something for an empty table, but i'm not following the explanation. There is also no visual of the outcome.
When using show-empty, it gives a simple text 'no records ...', but i don't want the text. Or maybe i want a custom text (depending on the language when using i18n).
So the html is currently:
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" >
</b-table>
And in the vue data i have:
dogs: [], //because i want to mimic an empty table
dogHeaders: ['name','color','age'],
Can someone show me an example how to do this?
edit: i currently see only a workaround with populating my dogs array with an empty dog like so:
dogs: [{name:'',color:'',age:''}],
But i guess there should be a better way (+ this workaround gives a row that has less height than an actual filled row)
You could use b-table with show-empty attribute and slots. I prepared a code snippet to show this:
new Vue({
el: '#app',
data: {
dogs: [],
dogHeaders: ['name', 'color', 'age'],
}
})
<link href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
<template #empty="scope">
Empty row
</template>
</b-table>
</div>
I think the example is right there in the docs. They provide slots for exactly this use case, where you can put anything you want:
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
<template #empty="scope">
Whatever HTML you put here will be shown when the table is empty
</template>
</b-table>
Since you want to render actual cells, you can use the top-row slot instead of the standard empty slot.
You can then conditionally render the slot using a v-if, based on whether the dogs array is empty or not.
Then render empty cells (<td>) inside the slot for each element in your dogHeaders array.
new Vue({
el: '#app',
data() {
return {
dogs: [],
dogHeaders: ['name', 'color', 'age']
}
},
methods: {
addRow() {
this.dogs.push({
name: 'Pence',
color: 'Black',
age: 53
})
}
}
})
<link href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-btn #click="dogs = []">Reset Table</b-btn>
<b-btn #click="addRow">Add row</b-btn>
<hr />
<b-table bordered head-variant="light" hover :items="dogs" :fields="dogHeaders">
<template #top-row v-if="dogs.length === 0">
<!-- Adding to the cell so that it maintains the standard cell height -->
<td v-for="i in dogHeaders.length"> </td>
</template>
</b-table>
</div>
I'm using bootsrap-vue.
It has a datepicker which after picking a date there is no way to make field clear.
<template>
<div>
<label for="datepicker-placeholder">Date picker with placeholder</label>
<b-form-datepicker id="datepicker-placeholder" placeholder="Choose a date" locale="en"></b-form-datepicker>
</div>
</template>
How can I clear the field?
You have two options.
Either bind a property to 's v-model, and then use JavaScript to reset the value of said property.
The other option is to use the reset-button prop, which adds a reset button to the datepicker popup which clears the selected date when clicked by default.
new Vue({
el: '#app',
data() {
return {
date: ''
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-3">
<b-input-group>
<b-datepicker v-model="date" reset-button></b-datepicker>
<template #prepend>
<b-btn #click="date = ''">Clear</b-btn>
</template>
</b-input-group>
</div>
You should use v-model to accept the selected date and then clear it using JavaScript, it will be removed from date selection
I Attempting to create a "v-checkbox" entry marked by default without using v-model directive.
In the official documentation for this Vuetify component I can't find the information on how to do this.
I tried to place this code but it doesn't work
<v-checkbox checked="true"></v-checkbox>
<v-checkbox checked="checked"></v-checkbox>
<v-checkbox checked></v-checkbox>
One way to do this is by setting input-value="true", as described in the API docs.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<head>
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<div id="app">
<v-app id="inspire">
<v-checkbox label="Foo" input-value="1"></v-checkbox>
</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>
You might want to use :value="checked" where checked is a boolean variable. value is a one-way binding while v-model is a two-way binding. More information here:
v-bind:value (or :value) is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa.
<template>
...
<v-checkbox :value="checked"/>
</template>
<script>
export default {
data () {
return {
checked: true,
}
},
}
</script>
Am trying to get the value scrollHeight of a texteara filed, the problem is when i use the document object : document.querySelector("#textarea-element").scrollHeight, i have a correct value ,
but when i’ve tried to do it with refs the value is wrong and didn’t change.
I’ve made a detailed jsfiddle for these behaviors please see below:
new Vue({
el: '#app' ,
data: {
height: 'auto',
scrollHeightUsingRefsVuejs:'',
scrollHeightUsingDocumentObject: ''
},
methods:{
resizeTextarea (e) {
this.scrollHeightUsingRefsVuejs = this.$refs.messageBox.$el.scrollHeight
this.scrollHeightUsingDocumentObject = document.querySelector("#textarea-element").scrollHeight
console.log(this.scrollHeightUsingRefsVuejs, this.scrollHeightUsingDocumentObject)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify#1.0.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify#1.0.11/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field
color="cyan darken"
label="Text field"
multi-line
rows="2"
placeholder="Start typing..."
ref="messageBox"
#keydown.native="resizeTextarea"
:style="{height: height}"
id="textarea-element"
></v-text-field>
<p>
Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingDocumentObject}}</strong>
</p>
<p>
<span style="color:red">(Wrong)</span> Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingRefsVuejs }}</strong>
</p>
</v-container>
</v-content>
</v-app>
</div>
(To see the value of scrollHeight type anything if the textearea filed)
The this.$refs.messageBox.$el.scrollHeight refers to parent node input-group generated by Vuetify that’s way the value seems wrong , all we need just to add a selector to tearea node like this this.$refs.messageBox.$el.querySelector('textarea').scrollHeight
I want to add the items in a v-select. for example, we dont have any item in a v-select and want to add it extrenaly.
<v-select
v-bind:label="Intelligence"
v-model="IntValues"
multiple >
</v-select>
When we write like this we will get only empty select list but how to add items into it externally
Here IntValues:[],
Or Editable list, like TodoMVC
new Vue({
el: '#app',
data() {
return {
selected: null,
items: []
}
},
methods: {
fetchItems() {
this.items = [
"A1",
"B2",
"C3"
]
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify#1.0.3/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex xs6>
<v-subheader>Standard</v-subheader>
</v-flex>
<v-flex xs6>
<v-select :items="items" v-model="selected" label="Select" single-line bottom></v-select>
</v-flex>
<div #click=fetchItems>FetchItems</div>
</v-layout>
</v-container>
</v-app>
</div>
You can modify the items later to update the value.
You can test with clicking the FetchItem to see the effect.
Watchers will do your work, add a watcher to your model and whenever it changes add value to your items.
You can refer this pen, it is using v-combobox which is having power of autocomplete.
https://codepen.io/saurabhtalreja/pen/yLMyJmE
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: ['Vuetify'],
items: [
'Programming',
'Design',
'Vue',
'Vuetify',
],
}
},
watch:{
select(val,prev){
console.log('New Input Value is' ,val);
console.log('Previous Value is' ,prev);
console.log('Model is = New Input ie. ', this.select);
console.log('Items Array is', this.items)
this.items.push(val);
console.log('New Items are', this.items)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.4.11/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row>
<v-col cols="12">
<v-combobox
v-model="select"
:items="items"
label="Combobox"
outlined
dense
></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
If you have data in an array variable named values, then just assign it to IntValues.
ie,
this.IntValues = values;
If you have a single object say value, then just push it to the IntValues. ie, this.IntValues.push(value).