I have such code:
<div id="app">
<b-form-group label="Sorting">
<b-form-checkbox-group
v-model="sorting"
:options="filterData.sorting"
/>
</b-form-group>
</div>
new Vue({
el: '#app',
computed: {
sorting: {
get: function () {
return this.filterInput.sorting
},
set: function (value) {
// this array needs to always have only one value
this.filterInput.sorting = [value[0]]
}
}
},
data () {
return {
filterData: {
sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
sorting: []
}
}
}
})
https://jsfiddle.net/pum86bsx/1/
Error seems to be in computed getter. When I comment it out it's all good. I have no idea why it's like that.
You setting the value of the v-model (the value returned in the getter), which will cause the setter to fire again.. and again.. and again.. Causing your stack to overflow.
Using checkboxes
You could instead use the #change event, which should only fire when the value actually changes.
new Vue({
el: '#app',
data () {
return {
filterData: {
sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
sorting: []
}
}
},
methods: {
onChange(value) {
if(value.length === 0) {
this.filterInput.sorting = value
} else {
this.filterInput.sorting = [value[value.length - 1]]
}
}
}
})
<link href="https://unpkg.com/bootstrap#4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.15.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label="Sorting">
<b-form-checkbox-group
v-model="filterInput.sorting"
:options="filterData.sorting"
#change="onChange"
></b-form-checkbox-group>
</b-form-group>
</div>
Using radio buttons
Alternatively you could use radio buttons, which only allows one to be selected at a time, so you don't have to handle that yourself.
new Vue({
el: '#app',
data () {
return {
filterData: {
sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
sorting: []
}
}
}
})
<link href="https://unpkg.com/bootstrap#4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.15.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label="Sorting">
<b-form-radio-group
v-model="filterInput.sorting"
:options="filterData.sorting"
></b-form-radio-group>
</b-form-group>
</div>
Related
I am trying to initiate a function from methods while an input is keyup, But it's not working. My codes from template are :
<q-input type="number" min="1" dense borderless debounce="300" class="q-ma-xs" v-
model="invoice_product.item_qty" placeholder="quantity" filled
#keyup="calculateLineTotal(invoice_product)" />
My method :
<script>
export default {
setup() {
return {
invoice_product: {
item_qty: ''
}
}
},
methods: {
calculateLineTotal(invoice_product) {
alert(invoice_product.item_qty)
}
}
}
</script>
I also tried with v-on:keyup
enter code hereYou can use watch property using your v model variable and there you can write your logic.
When your model value change it will called watch property
watch:{
“Variable” : function(val) {
//method
}
}
Try to replace setup with data:
new Vue({
el: '#q-app',
data() {
return {
invoice_product: {item_qty: ''}
}
},
methods: {
calculateLineTotal(invoice_product) {
alert(invoice_product.item_qty)
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#1.19.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
<div id="q-app">
<q-input type="number" min="1" dense borderless debounce="300" class="q-ma-xs" v-
model="invoice_product.item_qty" placeholder="quantity" filled
#keyup="calculateLineTotal(invoice_product)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.19.5/dist/quasar.umd.min.js"></script>
Here is sample of my code in vue.
<template>
<tabs>
<tab
v-for="c in myCount"
:key="c"
:name="c"
:selected="c === 1"
>
{{ c }}
</tab>
</tabs>
<button type="button" #click="showOneTab">Show just one tab</button>
</template>
<script>
export default {
name: 'myComponent',
data: {
return {
myCount: 5
}
},
methods: {
showOneTab() {
this.myCount = 1
}
}
}
</script>
myCount has default value of 5. after clicking a button it changes to 1. I need to tabs be removed and just the first appears.
Your code looks correct. But it doesn't work, you can try a computed property:
v-for="c in count"
computed: {
count() {
return myCount
}
}
Your data option should be a function that returns an object data(){ return { myCount: 5 } } not a field with object as value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data(){
return {
myCount: 5
}
},
methods: {
showOneTab() {
this.myCount = 1
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div v-for="c in myCount" :key="c">
{{ c }}
</div>
<button type="button" #click="showOneTab">Show just one tab</button>
</div>
I use a Form object to handle all my input fields and validation/errors etc.
new Vue({
el: '#root',
data: {
form: { trainer: '' }
}
And I can use it as v-model like this:
<input v-model='form.trainer' name='trainer'>
I would like to make the form an instance property, because I have to pass it to all my components at the moment.
Vue.prototype.$form = {trainer: ''}
new Vue({ el: '#root' });
However, its not reactive anymore:
<input v-model="$form.trainer">
<span v-text="$form.trainer"></span>
Changes to the input are not reflected on the span.
Is there a solution to use a instance property as v-model?
Using Global Mixin:
You can use Global Mixin and then add form: { trainer: '' } to it and then this option will be available in every Vue instance created afterwards like:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function () {
return {
form: { trainer: '' }
}
}
})
and then you can use it like normal component data option:
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
Demo:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function() {
return {
form: { trainer: '' }
}
}
})
// Define a new component called trainer
Vue.component('trainer', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<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="myApp">
<trainer></trainer>
<trainer></trainer>
</div>
Demo #2:
var trainer2Data = {
form: { trainer: '' }
}
Vue.mixin({
data: function() {
return trainer2Data;
}
})
// Define a new component called trainer2
Vue.component('trainer2', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<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="myApp">
<trainer2></trainer2>
<trainer2></trainer2>
</div>
I have a child instance of Vue and v-bind only works on the parent instance but not in the child one. I did a sample file to explain my issue.
Am I missing something?
This is my code:
var app2 = new Vue({
el: '#app2',
data: {
isSpinning2: true
},
methods: {
stop2: function() {
app2.isSpinning2 = false;
}
}
});
var app1 = new Vue({
el: '#app1',
data: {
isSpinning: true
},
methods: {
stop1: function() {
app1.isSpinning = false;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app1">
<i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i>
<button v-on:click="stop1">Stop 1</button>
<div id="app2">
<i v-bind:class="{'fa-spin': isSpinning2}" class="fa fa-address-book"></i>
<button v-bind:onclick="stop2">Stop 2</button>
</div>
</div>
This is exactly what components are for. Here is a component encapsulating your spinner buttons.
console.clear()
Vue.component("spinner",{
template: `
<div>
<i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i>
<button v-on:click="stop"><slot /></button>
</div>
`,
data(){
return {
isSpinning: true
}
},
methods: {
stop: function() {
this.isSpinning = false;
}
}
})
var app1 = new Vue({
el: '#app1',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app1">
<spinner>Stop 1</spinner>
<spinner>Stop 2</spinner>
</div>
My HTML:
<paginate
:pageCount="max"
:containerClass="'pagination'"
:clickHandler="redirectToPage"
:force-page="selectedPage">
</paginate>
max is getter from vuex. When paginate is loading max = undefined, so I need to set pageCount after value max is changed.
In offical docs only static value:
Taking Belmin Bedak's comment into account, here it is working with a v-if to make it wait for pageCount to load. In testing, I found that updating pageCount works as expected: the number of pages available is updated.
vm = new Vue({
el: '#app',
data: {
max: null
},
components: {
paginate: VuejsPaginate
},
methods: {
clickCallback: function(page) {
console.log(page);
}
},
mounted() {
// Pretend we're getting from vuex
setTimeout(() => {
this.max = 7;
}, 1000);
}
});
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/vuejs-paginate#0.8.0"></script>
<div id="app">
<paginate v-if="max"
:page-count="max"
:container-class="'pagination'"
:click-handler="clickCallback">
</paginate>
<div v-else>
Loading...
</div>
</div>