Using BootstrapVue, I have the following input element inside a b-form:
<b-form-input v-model="myTest" type="number" max="9999"></b-form-input>
I want the following behavior:
The user should be allowed to only enter digits (and not letters or other characters). I tried implementing this with type="number", but it is only having an effect in Chrome, and not Firefox.
The maximum number that the user can enter should be four digits. I tried implementing this with max="9999", but it doesn't have any effect.
How do I implement this intended behavior?
There doesn't seem to be a way to do this in boostrap-vue from the documentation. You can do it with vanilla js though:
<b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>
let parseNum = function(scope){ //scope is 'this' which is html input element
if(parseInt(scope.value)>999) scope.value =9999 // check if too large
if(isNaN(parseInt(scope.value))) scope.value=1 // check if number
}
See this in action below:
let parseNum = function(scope){
if(parseInt(scope.value)>999) scope.value =9999
if(isNaN(parseInt(scope.value))) scope.value=1
}
const app = new Vue({
data() {
return {
value: '2'
}
},
}).$mount('#app');
<link href="https://unpkg.com/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<label for="range-1">Example range with min and max</label>
<b-form-input id="range-1" v-model="value" type="number" onkeyup="parseNum(this)"></b-form-input>
<div class="mt-2">Value: {{ value }}</div>
</div>
jsfiddle
Related
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
Hello I'am using Vue and Ant Design. So i pick Collapse Component from Ant Design: https://antdv.com/components/collapse/
My problem is that in Collapse.Panel there is a prop header which is string, but i need to put string in there (example: v0.6.1.11) and date, so i can add margin-left: auto or something like that in date.
Exmaple:
I tried using white-space: pre and then simply add spaces to achive that space between but it's not responsive solution.
How can i pass into header prop pure html so i could put something like two <p> tags there and then create space between title and date?
As per docs, we can make use of Panel property extra slot.
Run this sample code
new Vue({
el: "#app",
data() {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
activeKey: ['1'],
expandIconPosition: 'left',
};
},
computed:{
currDate(){
return new Date().toLocaleDateString()
}
}
});
.ant-collapse>.ant-collapse-item>.ant-collapse-header{
display:flex;
justify-content:space-between
}
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue#1.4.11/dist/antd.min.css">
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="http://bms.test/vendor/laravel-admin/moment/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/ant-design-vue#1.5.0/dist/antd.min.js"></script>
<div id="app">
<a-collapse v-model="activeKey">
<a-collapse-panel key="1" header="This is panel header 1">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
<a-collapse-panel key="3" header="This is panel header 3" disabled>
<p>{{ text }}</p>
<div slot="extra">{{currDate}}</div>
</a-collapse-panel>
</a-collapse>
</div>
You can use the below code for the pupose.
<a-collapse-panel key="1" header="heading 1">
<p>Content</p>
<template #extra><p>heading 2</p></template> <!-- for newer version -->
<p slot="extra">heading 2</p> <!-- for older version -->
</a-collapse-panel>
I am trying to create a form with a number field.
<b-input v-model="testNumber" type="number"/>
On my data, I have a simple number var.
data() {
return {
testNumber: 10,
}
},
However when I trace testNumber it is a string
{{ typeof testNumber }} // String
You can add a modifier to the v-model.
(https://v2.vuejs.org/v2/guide/forms.html#number)
<b-form-input v-model.number="testNumber" />
UPDATE
Don't use the v-model.number this as bootstrap-vue recommens not to do so:
v-model modifiers .number and .trim can cause unexpected cursor jumps
when the user is typing (this is a Vue issue with v-model on custom
components). Avoid using these modifiers.
But use as b-form-input suggests:
To get around this, <b-form-input> and <b-form-textarea> have two
boolean props trim and number which emulate the native Vue v-model
modifiers .trim and .number respectively.
<b-form-input v-model="testNumber" :number="true" />
The type=number default return value type is string. you can see here HTML input elements are documented to return string representing a number
For changing this behavior of model value, you need to convert the your value when input is changing. Like below example
Please below code snippet :
new Vue({
el: '#app',
data() {
return {
number:10,
testNumber:100
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="number" type="number"/>
<p>type of number : {{typeof number}}</p>
<input v-model="testNumber" type="number" #input="e => testNumber = +e.target.value" />
<p>type of testNumber: {{typeof testNumber}}</p>
</div>
Bootstrap-vue example
In this example, you can use value by getting .valueAsNumber and same as above you can use +.value.
new Vue({
el: '#app',
methods: {
updateVm(e) {
this.testNumber1 = e.target.valueAsNumber;
}
},
data() {
return {
number: null,
testNumber: null,
testNumber1: null
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this to <head> -->
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="app" style="padding:10px;">
<template>
<b-container fluid>
<b-row>
<b-col><b-input placeholder="First number" v-model="number" type="number"/></b-col>
<b-col>{{typeof number}}</b-col>
</b-row>
<b-row>
<b-col><b-input placeholder="2nd number" v-model="testNumber" type="number" v-on:input="$v => testNumber = +$v"/></b-col>
<b-col>{{typeof testNumber}}</b-col>
</b-row>
<b-row>
<b-col><b-input placeholder="3rd number" v-model="testNumber1" type="number" v-on:input="updateVm(event)"/></b-col>
<b-col>{{typeof testNumber1}}</b-col>
</b-row>
</b-container>
</template>
</div>
<template>
<b-container fluid>
<b-row class="my-1" v-for="type in types" :key="type">
<b-col sm="3">
<label :for="`type-${type}`">Type <code>{{ type }}</code>:</label>
</b-col>
<b-col sm="9">
<b-form-input :id="`type-${type}`" :type="type"></b-form-input>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
types: [
'number'
]
}
}
}
</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 am trying to use bootstrap color picker plugin with vue2. I read the following tutorial that shows how to do stuff like that.
Here is my component code:
<template>
<div class="input-group colorpicker-component">
<input type="text" value="#b8c7ce" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</template>
<script>
export default {
mounted: function() {
$(this.$el).colorpicker()
},
}
</script>
https://itsjavi.com/bootstrap-colorpicker/
Color picker works fine If I call it directly from javascript like this:
$('#sidebar_font_color').colorpicker()
However when I do this
<color-picker></color-picker>
I get this in console:
[Vue warn]: Error in mounted hook: "TypeError: $(...).colorpicker is
not a function"
I am not making a full SPA app just using some vue2 with my application at various points. Any idea why it cant find that function?
Here's a minimal working example. Your error message indicates that you don't have the colorpicker code loaded when mounted runs, or possibly that jQuery is not loaded before the colorpicker code is.
new Vue({
el: '#app',
components: {
colorPicker: {
template: '#cp-template',
mounted() {
$(this.$el).colorpicker()
},
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<color-picker></color-picker>
</div>
<template id="cp-template">
<div class="input-group colorpicker-component">
<input type="text" value="#b8c7ce" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</template>