【Vue.js】 optionに設定したv-bindの値が取れない。

Question

前提

こんにちは。Vue.jsの学習をしているプログラミング初心者です。
今、日付を選択するselect,期間を選択するselectと二つのseelctを作成して、そのそれぞれの選択結果を取得しシフト時間を入力できるカレンダーみたいなものを表示たいと思っています。

困っていることは期間のセレクトの値はとってこれたのですが、日付のセレクトでyear,month,dateの値をそれぞれバラバラに取得したくてv-bind値を以下のように設定しましたがReferenceErrorが出てしまいます。以下に該当のソースコードを張ります。

<div class="timesheet" v-if="isTimeSheet">
     <select v-model="dateselect" @change="dateselect">
         <option key="">--選択してください--</option>  //ここのoptionのyear,month,dateそれぞれ取得したい。
         <option v-for="(date, index) in getdates" :key="index" :year="date.year" :month="date.month" :date="date.date">{{ date.text }}</option>
     </select>
     <select v-model="periodselect" @change="periodselect">
         <option value="">--選択してください--</option>
         <option value="week">１週間</option>
         <option value="twoweek">２週間</option>
         <option value="month">１ヶ月</option>
      </select>
</div> 

export default {
        data:function(){
            return{
            getdates:this.getdate()
            }
        },
        methods: {
            active: function() {
            this.isActive = !this.isActive;
            },
            timesheet: function() {
            this.isTimeSheet = !this.isTimeSheet;
            },
            getdate: function() {
                const today = new Date();
                const selectdates=[];
                const selectdate = today.getFullYear()+"年"+today.getMonth()+1+"月"+today.getDate()+"日";
                const week = ['日', '月', '火', '水', '木', '金', '土']
                for(let i = 1; i < 16; i++){
                    //取得する日付の値を設定
                    let param = Date.now() + i * 86400000
                    //値から日付を取得
                    let date = new Date(param);
                    //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]+')';
                    // let valueFormat = y+'-'+m+'-'+d;
                    selectdates.push({"text":textFormat,"year":y,"month":m,"date":d});
                }
                console.log(selectdates);
                return selectdates;
            },
            dateselect :function(){
                console.log(this.selectedOption);
            },
            periodselect:function(e){
                console.log(e.target.value);
            },
        },
        computed:{
             selectedOption() {
                const selected = this.getdates.find(date.year);　//eferenceError: date is not definedと出ます。
                    return selected
            }
        }
    }

初心者で質問の意図もコードもわかりづらいかと思いますがご教授いただければ幸いです。よろしくお願いします。

Answer 1

:hoge は v-bind:hogeとしてコンポーネント間でデータのやり取りをするための制御なのでjQueryのdataプロパティのように使用しません。プルダウンでメンバも含め値を取得したい場合はv-bind:valueディレクティブで対応します。

この場合は`v-bind:value="date"としてからあとで算出プロパティsetterの引数からメンバを取得すればいいでしょう。

<select v-model="dateselect">
         <option key="">--選択してください--</option>  //ここのoptionのyear,month,dateそれぞれ取得したい。
         <option v-for="(date, index) in getdates" :key="index" :value="date">{{ date.text }}</option>
</select>
/*中略*/
 computed:{
     dateselect：{
　　　　get(){
             let date = this.date //ここからsetterの値を引っ張ってくる
　　　　　　 //console.log(date)で確認するとメンバを持っている状態になっているはず
             const selected = this.getdates.find(date.year);　//eferenceError: date is not definedと出ます。
                return selected
        },
        //プルダウンで選択した:valueの値
        set(date){
            this.date = date
        }
     }
}

それからプルダウンは算出プロパティだけで変化した値を検出できるので、二重でメソッドを書かないようにしましょう。

Comments

[yaenopikomaro]

ご丁寧にありがとうございました。直前にjQueryを学習していたものですから一緒になって考えてしまいました。無事に実装できました。