내 데이터를 형식화하여 부모 구성 요소로 보내려고하는데 반응이없는 것 같습니다.
if(this.selectedDate !== '' && this.selectedMonth !== '' && this.selectedDate !== '' ){
this.$emit("emit-data", this.selectedYr+"-"+moment().set(this.selectedDate) .format("DD")+"- "+moment().set(this.selectedMonth).format("MM"))
}
선택한 드롭 다운을 보내지 않지만 페이지로드시 미리 선택된 기본 드롭 다운을 보냅니다. 그러나 moment()전송되는 데이터 에서 형식을 제거하면 올바른 값을 보냈지 만 여전히 데이터 형식이 필요합니다.YYYY-DD-MM
방출하기 전에 setter와 getter를 사용하여 계산하는 방법이 있습니까? 방법은 모르겠지만 방법이 있다면?
예,이를 위해 리 액티브 컴퓨팅 게터를 절대적으로 사용할 수 있습니다. 다음은 그 예입니다.
<div id="app">
<parent-component />
</div>
const parentComponent = Vue.component('parent-component', {
data () {
return {
formattedDate: null
}
},
template: `
<div>
<p>You have selected: {{ formattedDate || "nothing yet" }}.</p>
<child-component
@emit-data="(payload) => formattedDate = payload"
/>
</div>
`
})
const childComponent = Vue.component('child-component', {
data () {
return {
selectedDate: null,
selectedMonth: null,
selectedYear: null
}
},
computed: {
formattedDate () {
if (![this.selectedDate, this.selectedMonth, this.selectedYear].every((el) => el)) return null
return moment({
day: this.selectedDate,
// Months in Moment.js are 0-indexed!
month: this.selectedMonth - 1,
year: this.selectedYear
}).format("YYYY-DD-MM")
}
},
watch: {
formattedDate (newVal) {
this.$emit("emit-data", newVal)
}
},
template: `
<div>
<input v-model="selectedDate" type="number" placeholder="Day" min="1" max="31" step="1">
<input v-model="selectedMonth" type="number" placeholder="Month" min="1" max="12" step="1">
<input v-model="selectedYear" type="number" placeholder="Year" min="1900" max="2100" step="1">
</div>
`
})
new Vue({
el: "#app"
})
https://jsfiddle.net/46vuLcy0/ 에서 위의 내용을 대화식으로 실행할 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다