<template>
<Slider v-model="[0, 2500]" :min="0" :max="2500" :step="50" />
</template>
I need the steps to be like [50, 100, 250] but not the single value i.e 50
Can anybody help me with this
You can use a simple input range with your desired values. Only the v-model is important to create the two-way-data-binding.
new Vue({
el: '#app',
data: {
selectedValue: 0
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id='app'>
<input type="range" min="0" max="2500" step="50" v-model="selectedValue">
<p>selected value: {{ selectedValue }}</p>
</div>
Related
So I've got an Object namely:
test:{price: 9, qty:1}
How can I loop through this object and only get the second value namely the qty?
JS:
new Vue({
el: '#app',
data: {
test:{price: 9, qty:1}
}
HTML:
<div v-for="(value, key, index) in test>
{{ value[1] }}
</div>
Since test is an object and you want to access just a single property, so there is no need to loop here you can simply access the object property using . dot notation like:
<div>
{{ test.qty }}
</div>
Demo:
new Vue({
el: '#app',
data: {
test: {
price: 9,
qty: 1
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="app">
<div class="card p-2">
Qty: {{ test.qty }}
</div>
</div>
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>
I am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.
html:
<div id="app">
<div v-if="isIf === 1">
isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
isIf is 2：{{isIf}}
</div>
<div v-else>
isIf is not 1 or 2：{{isIf}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?
Your v-else-if condition is wrong - instead of
<div v-else-if="2">
it should be
<div v-else-if="isIf === 2">
Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"
I am rendering a list of store titles in VueJS, some of them have a url property, some of them don't. If the title has a url, I want to add a a href property:
<div v-for="(store, index) in stores">
<span v-if="store.link"><a :href="store.link" target="_blank">{{ store.title }}</a></span>
<span v-else="store.link">{{ store.title }}</span>
</div>
This works, but the code looks duplicated. Is there anyway to simplify the code further?
you can use component tag:
var app = new Vue({
el: '#app',
data () {
return {
stores: [
{title:'product1',link:'/products/222'},
{title:'product2'},
{title:'product3',link:'/products/333'},
{title:'product4'}
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="(store, index) in stores">
<component :is="store.link?'a':'span'" :href="store.link || ''" target="_blank">{{store.title}}
</component>
</div>
</div>
I'd remove the first span element, as it's not necessary. Also, the v-else does not need the conditional statement (it's not v-else-if):
new Vue({
el: '#app',
data: {
stores: [
{ link: 'foo', title: 'foo-text' },
{ title: 'bar-text' }
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(store, index) in stores" :key="index">
<a v-if="store.link" :href="store.link" target="_blank">{{ store.title }}</a>
<span v-else>{{ store.title }}</span>
</div>
</div>
You can use dynamic arguments in vue3
https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments
<a v-bind:[attributeName]="url"> ... </a>
or binding an object of attributes
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
I would like to bind v-model to a specific array element like the following, is this possible?
<input v-model='item[1]' />
Thanks
Yes, that is the right way:
var vm = new Vue({
el: '#vue-instance',
data: {
items: ["Item1", "Item2"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="vue-instance">
<input v-model='items[0]'/>
<div v-for="item in items">
{{item}}
</div>
</div>