[英]How to get default value from component vue.js?
我有这个组成部分:
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="config.state.fromDate" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
fromDate: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('selected', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
注意这一部分:
:value="config.state.fromDate"
我加载了这个组件:
<div class="card selector col-md-4 holder">
<pickerTo v-on:selected="DateSelector2" ></pickerTo>
</div>
import pickerTo from '../components/DateFilterTo'
我有一个函数,它会在发生更改时获取选定的值:
DateSelector2: function(date) {
FromDate = date
}
选择了新日期后,我会将其分配给父母内部的全局变量。
问题 :
我在组件中设置了一个默认日期,当我向服务器发出请求时,我希望获得该日期。 我无法弄清楚如何获取此默认值,因为它不会在change事件中发生。
我是vue的新手。
一种简单的方法是在mounted
函数触发时发出默认值。
mounted () {
this.$emit('selected', config.state.fromDate)
}
除此之外,我会将值变异为prop并稍作更改以使其能够与v-model
以便使用选择派生该值的任何方法从父级传递默认值。
编辑:
这是我将其重构为使用道具的方式。
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="value" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
props: {
value: {
type: String,
required: true
}
},
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('input', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
现在您可以将组件与v-model指令一起使用,以进行2种方式绑定
<component v-model="dateFrom"></component>
...
data () {
return {
dateFrom: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.