1
私が取り組んでいるVue Calendarがあります。 1日がクリックされると、その日の詳細を表示する選択された1週間の週の下に全角ボックスを開きたいと思います（Googleイメージのレイアウトを考える）私はVueでデータを渡す方法を知っていますが、今週の行の詳細（コンポーネント、ビュー？）あなたは、行の概念はありませんので（（あなただけの自動ラップ）、あなたが本当に行を占めボックスを挿入することはできません私のCodePenVue詳細コンテンツを追加する方法動的に行
<div class="calendar">
<div class="header z-depth-2">
<a @click="lastMonth" class="waves-effect waves-light btn"><i class="material-icons left">chevron_left</i>Last Month</a>
<p>{{month}} {{year}}</p>
<a @click="nextMonth" class="waves-effect waves-light btn"><i class="material-icons right">chevron_right</i>Next Month</a>
</div>
<ul class="dates month">
<li class="dow" v-for="dow in days">{{dow}}</li>
<li v-for="blank in firstDayOfMonth" class="day"></li>
<li v-for="date in daysInMonth" @click="openday(date)"
class="day" :class="{'today': date == initialDate && month == initialMonth && year == initialYear}">
<span>{{date}}</span>
</li>
</ul>
</div>
JS
new Vue({
el: '.calendar',
data: {
today: moment(),
dateContext: moment(),
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
},
methods:{
nextMonth: function() {
var t = this;
t.dateContext = moment(t.dateContext).add(1, 'month');
},
lastMonth: function() {
var t = this;
t.dateContext = moment(t.dateContext).subtract(1, 'month');
}
},
computed: {
year: function() {
var t = this;
return t.dateContext.format('YYYY');
},
month: function() {
var t = this;
return t.dateContext.format('MMMM');
},
daysInMonth: function() {
var t = this;
return t.dateContext.daysInMonth();
},
currentDate: function() {
var t = this;
return t.dateContext.get('date');
},
firstDayOfMonth: function() {
var t = this;
var firstDay = moment(t.dateContext).subtract((t.currentDate - 1), 'days');
return firstDay.weekday();
},
//Previous Code Above
initialDate: function() {
var t = this;
return t.today.get('date');
},
initialMonth: function() {
var t = this;
return t.today.format('MMMM');
},
initialYear: function() {
var t = this;
return t.today.format('YYYY');
}
}
})
私はあなたのアドバイスを取り、私はそれが最適な表示が可能になると思うようになりましたweek' 'のための機能を追加しています。ありがとう！ – Auzy
1週間を選択する推奨方法はありますか？プレーンなJSで私はおそらく最初のセレクタ 'week'を得るような何かをするだろう。それを行うためのより多くの方法がありますか？ – Auzy
あなたのデータは週単位で整理されるべきですので、 'v-if =" week.includes（selectedDate） "'のようなことができるはずです。 –