Vue.jsでシフト表を作成したい

js

1Vue.createApp({2 data: function () {3 return {4 names: ["佐藤", "伊藤", "遠藤", "鈴木", "田中", "小林", "千葉", "加藤", "山崎", "中村", "高橋", "渡辺", "山本", "吉田", "石田", "佐藤", "伊藤", "遠藤", "鈴木", "田中", "小林", "千葉", "加藤", "山崎", "中村", "高橋", "渡辺", "山本", "吉田", "石田"],5 names6: [],6 }7 },8methods: {9 //ボタンが押された時の処理10 buttonClick() {11 //4週分繰り返す12 for (let i = 0; i < 4; i++) {13 //月~金をdaysOfWeekに格納14 const daysOfWeek = ["月", "火", "水", "木", "金"];15 //namesの配列からデータの一部分だけ取り出しnamesCopyに格納16 const namesCopy = this.names.slice();17 const weeks = 2;18 //weeksを繰り返す19 for (let i = 0; i < weeks; i++) {20 const weekSchedule = { weekNumber: i + 1, days: [] };21 daysOfWeek.forEach((day) => {22 const daySchedule = { dayName: day, names: [] };23 //6回繰り返す24 for (let j = 0; j < 6; j++) {25 if (namesCopy.length === 0) break;26 //namesCopyの要素数を取得→ランダム→randomIndexに格納27 const randomIndex = Math.floor(Math.random() * namesCopy.length);28 //spliceで置き換えて、daySchedule.namesに追加する29 daySchedule.names.push(namesCopy.splice(randomIndex, 1)[0]);30 }31 weekSchedule.days.push(daySchedule);32 });33 //names6という空の配列に追加する34 this.names6.push(weekSchedule);35 }36 }37 },38},39mounted() {40 for (let i = 0; i < buttonClick(); i++) {41 }42},43 44}).mount("#app")45