admin管理员组文章数量:1331647
I use v-calendar package in my Vue.js application.
I want to send selected data range values to parent ponent. Why @change
trigger don't work?
Parent.vue:
<template>
<div>
<Child @setRange="setRange" :range="range"/>
</div>
</template>
<script>
data() {
return {
range: this.range,
}
},
mounted() {
firstCallToPage();
},
methods: {
firstCallToPage(){
axios.get('URL').then(response => {
let self = this;
this.range = {
start: response.startDate,
end: response.endDate,
};
}
},
setRange(range_value) {
this.range = range_value;
}
}
</script>
Child.vue:
<v-date-picker class='v-date-picker'
mode='range'
v-model='rangeValue'
:show-day-popover=false
:max-date='new Date()'
show-caps
:input-props='{placeholder: "", readonly: true}'
@change="sendRange">
</v-date-picker>
props: {
range: {
type: Object,
},
},
data() {
return {
rangeValue: this.range
}
},
sendRange: function () {
this.$emit('setRange', this.rangeValue);
}
ERROR in console:
Avoid mutating a prop directly since the value will be overwritten whenever the parent ponent re-renders.
Instead, use a data or puted property based on the prop's value. Prop being mutated: "range"
I use v-calendar package in my Vue.js application.
I want to send selected data range values to parent ponent. Why @change
trigger don't work?
Parent.vue:
<template>
<div>
<Child @setRange="setRange" :range="range"/>
</div>
</template>
<script>
data() {
return {
range: this.range,
}
},
mounted() {
firstCallToPage();
},
methods: {
firstCallToPage(){
axios.get('URL').then(response => {
let self = this;
this.range = {
start: response.startDate,
end: response.endDate,
};
}
},
setRange(range_value) {
this.range = range_value;
}
}
</script>
Child.vue:
<v-date-picker class='v-date-picker'
mode='range'
v-model='rangeValue'
:show-day-popover=false
:max-date='new Date()'
show-caps
:input-props='{placeholder: "", readonly: true}'
@change="sendRange">
</v-date-picker>
props: {
range: {
type: Object,
},
},
data() {
return {
rangeValue: this.range
}
},
sendRange: function () {
this.$emit('setRange', this.rangeValue);
}
ERROR in console:
Avoid mutating a prop directly since the value will be overwritten whenever the parent ponent re-renders.
Instead, use a data or puted property based on the prop's value. Prop being mutated: "range"
Share
Improve this question
edited Dec 24, 2018 at 12:24
Nurzhan Nogerbek
asked Dec 24, 2018 at 8:04
Nurzhan NogerbekNurzhan Nogerbek
5,24620 gold badges98 silver badges201 bronze badges
4
-
1
I'm diving into the docs and they seem to use
@input
instead of@change
. Have you tried it? – Thomas Lombart Commented Dec 24, 2018 at 10:35 - Thank you for information. I successfully send date range values to parent panent when user select date in widget. In fact the problem was with mutation. It steal show me this message. Can you check my post again pls. I add error message which I see in console. How I can fix it? Do you have any ideas? – Nurzhan Nogerbek Commented Dec 24, 2018 at 11:20
- I provided you an answer. – Thomas Lombart Commented Dec 24, 2018 at 11:26
- @NurzhanNogerbek - Great! If it works for you and you are happy - then in general you would accept the answer. This will not only help other people with the same issue but it will also mean people are more likely to help you in the future with any other issues you have. You can read about accepting here: stackoverflow./help/accepted-answer – Amaarockz Commented Dec 4, 2020 at 15:33
3 Answers
Reset to default 2Try @input instead of @change. In v-datetime-picker works only with @input.
The error message is pretty explicit. The problem is that you give a prop to your child ponent (the one that contains v-date-picker
) and you are overriding this prop with v-model
(v-model
is just syntactic sugar for :value
and @change
).
Derive your prop's value with a data
value and use it for your operations:
<v-date-picker class='v-date-picker'
mode='range'
v-model='rangeValue'
:show-day-popover=false
:max-date='new Date()'
show-caps
:input-props='{placeholder: "", readonly: true}'
>
</v-date-picker>
props: {
range: {
type: Object,
},
},
data() {
return {
rangeValue: this.range
}
},
sendRange: function () {
this.$emit('setRange', this.rangeValue);
}
Instead of using a method, you can make use of watch...
Consider you have the following attributes in the range Object
range: {
start:value,
end: value
}
<v-date-picker class='v-date-picker'
mode='range'
v-model='rangeValue'
:show-day-popover=false
:max-date='new Date()'
show-caps
:input-props='{placeholder: "", readonly: true}'
>
</v-date-picker>
props: {
range: {
type: Object,
},
},
watch: {
'rangeValue.start': function(newVal){
this.$emit('setRange', newVal);
}
},
data() {
return {
rangeValue: this.range
}
}
本文标签: javascriptWhy change trigger don39t work for vdatapickerStack Overflow
版权声明:本文标题:javascript - Why `@change` trigger don't work for v-data-picker? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742270474a2444210.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论