费用控制组件:
<template>
<div class="expenses-controls">
<select :value="selectedMonth" class="expense-month-select">
<option
v-for="(month, i) in months"
:key="i"
:value="month"
>{{ month }}</option>
</select>
<select :value="2021" class="expense-year-select">
<option
v-for="(year, i) in years"
:key="i"
:value="year"
>{{ year }}</option>
</select>
</div>
</template>
<script>
export default {
props : {
months : Array,
years : Array,
selectedMonth : String,
selectedYear : Number,
},
}
</script>
费用卡组件:
<template>
<panel class="expenses-card">
<template v-slot:body>
<expenses-controls
:months="months"
:years="expenseYears"
:selectedMonth="selectedMonth"
:selectedYear="selectedYear"
></expenses-controls>
</template>
</panel>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import Panel from '@/components/Panel';
import moment from 'moment';
import Spinner from '@/components/Spinner';
import DataTable from '@/components/Expenses/DataTable/Datatable';
import ExpensesControls from '@/components/Expenses/ExpensesControls.vue';
const now = moment();
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const fields = [
{
id : 'date',
title : 'Date',
},
{
id : 'description',
title : 'Description',
},
{
id : 'category',
title : 'Category',
},
{
id : 'amount',
title : 'Amount',
},
];
export default {
components : {
Panel,
Spinner,
DataTable,
ExpensesControls,
},
data() {
return {
months : months,
selectedYear : +now.format('YYYY'),
selectedMonth : now.format('MMMM'),
fields : fields,
filterRowToggle : false,
insertRowToggle : false,
rows : [],
}
},
computed : {
...mapState({
token : state => state.token,
expenses : state => state.expensesStore.expenses,
expenseYears : state => state.expensesStore.expenseYears,
initializedRequest : state => state.expensesStore.initializedRequest,
}),
},
}
</script>
我正在尝试将此选择选项中的默认选定年份设置为当前年份 2021。目前,我在使用 selectedYear
之前硬编码了 2021 年,以查看它是否有效,但到目前为止还没有奏效。月份的默认选择确实有效,并将二月显示为默认值,因此不确定为什么第一年不起作用。
我已经包含了相关代码和屏幕截图。
任何帮助将不胜感激