【Vue.js】for文で複数個作ったselect文の差別化がしたい

Question

プログラミング初心者なので見当違いの質問をしていたらすみません。

前提

日付ごとに勤務可能時間を入力できるシフト希望表みたいな機能を作っています。
1週間/2週間/1ヶ月で表示を切り替える事が出来、切り替えに応じてその期間分の日付と希望プルダウンを入力させるようにしたい。

問題点

forで期間分の日付の数分selectを表示させるようにしたところ、同じselectが生成されているからか一つのセレクトボックスを選択するとすべてのセレクトボックスの値が変更されてしまいます。
そのほかにもいろいろな問題がありますが今回はそのselectボックスの差別化を図るにはどうしたらいいのかを聞きたいです。よろしくお願いいたします。

 <select v-model="dateselects" id="dataselect">
                                    <option key="">--選択してください--</option>
                                    <option v-for="(date, index) in getdates" :key="index" :value="date">{{ date.text }}</option>
                                </select>
                                <select v-model="periodselect">
                                    <option value="">--選択してください--</option>
                                    <option value="week">１週間</option>
                                    <option value="twoweek">２週間</option>
                                    <option value="month">１ヶ月</option>
                                </select><button @click="siftinput">表示</button>

                                <div class="timesheet" v-if="isSiftinput">
                                    <div v-for="(date, index) in getdates" :key="index" :value="date">{{ date.text }}>
                                        <div class="selectcolumn">
                                            <div class="selectedDate"></div>
                                            <select>
                                                <option value="">-▼</option>
                                                <option value="maru">〇</option>
                                                <option value="sankaku">△</option>
                                                <option value="batsu">×</option>
                                            </select>
                                            <select v-model="startTimeHour">
                                                <option v-for="(h, index) in startTimeHour" :key="index" :value="h">{{ h }}</option>
                                            </select>時
                                            <select v-model="startTimeMinutes">
                                                <option v-for="(m, index) in startTimeMinutes" :key="index" :value="m">{{ m }}</option>
                                            </select>分～
                                            <select v-model="leavingTimeHour">
                                                <option v-for="(hh, index) in leavingTimeHour" :key="index" :value="hh">{{ hh }}</option>
                                            </select>時
                                            <select v-model="leavingTimeMinutes">
                                                <option v-for="(mm, index) in leavingTimeMinutes" :key="index" :value="mm">{{ mm }}</option>
                                            </select>分
                                        </div>
                                    </div>
                                </div>

export default {
    data:function(){
        return{
        isActive:true,
        isTimeSheet:true,
        isSiftinput:false,
        getdates:this.getdate(),
        hour:["-▼","09",10,11,12,13,14,15,16,17,18,19,20,21,22,23],
        minutes:["-▼","00",10,20,30,40,50],
        startTimeHour:["-▼","09",10,11,12,13,14,15,16,17,18,19,20,21,22,23],
        startTimeMinutes:["-▼","00",10,20,30,40,50],
        leavingTimeHour:["-▼","09",10,11,12,13,14,15,16,17,18,19,20,21,22,23],
        leavingTimeMinutes:["-▼","00",10,20,30,40,50]
        }
    },
    methods: {
        active: function() {
            this.isActive = !this.isActive;
        },
        timesheet: function() {
            this.isTimeSheet = !this.isTimeSheet;
        },
        siftinput: function() {
            const syear = this.date.year;
            const smonth = this.date.month-1;
            const sdate = this.date.date;
            let prioddate2;
            if(this.priod==="week"){
                console.log("isshuukan");
                prioddate2 = this.prioddate(syear,smonth,sdate,7);
            }else if(this.priod==="twoweek"){
                console.log("nishuukan");
                prioddate2 = this.prioddate(syear,smonth,sdate,14);
            }else if(this.priod==="month"){
                console.log("ikkagetu");
                prioddate2 = this.prioddate(syear,smonth,sdate,30);
            }else{
                console.log("nyuuryokusitekudasai");
            }
            console.log(prioddate2);
            this.isSiftinput = true;
            return prioddate2
        },
        getdate: function() {
            const today = new Date();
            const syear = today.getFullYear();
            const smonth = today.getMonth();
            const sdate = today.getDate()
            return this.prioddate(syear,smonth,sdate,15);
        },
        prioddate: function(syear,smonth,sdate,priod){
            const selectdates=[];
            const week = ['日', '月', '火', '水', '木', '金', '土']
            //取得する日付の値を設定
            let date = new Date(syear,smonth,sdate);
            for(let i = 0; i < priod; i++){
                //値から日付を取得
                date = date.getTime() + i * 86400000;
                date = new Date(date);
                //dateから年月日曜を取得
                let y = date.getFullYear();
                let m = date.getMonth()+1;
                let d = date.getDate();
                let w = date.getDay();
                //月を2桁に揃える
                if(m < 10){ m = '0'+m };
                //日を2桁に揃える
                if(d < 10){ d = '0'+d };
                //出力形式
                let textFormat = y+'年'+m+'月'+d+'日'+'('+week[w]+')';
                selectdates.push({"text":textFormat,"year":y,"month":m,"date":d,"week":week[w]});
            }
            return selectdates;
        }
    },
    computed:{
        dateselects:{
            get(){
                let date = this.date //ここからsetterの値を引っ張ってくる
                return date
            },
            set(date){
                this.date = date;
            }
        },
        periodselect:{
            get(){
                const selected = this.value;
                return selected;
            },
            set(priod){
                this.priod = priod;
            }
        }
    }
}

Answer 1

<select v-model="startTimeHour"> で、同じmodelを使用しているのが原因です。
とりあえずv-model="startTimeHour"を消せばそれぞれ選択できるようになります。

Comments

[yaenopikomaro]

ありがとうございます！おかげさまで解決いたしました！