前提・実現したいこと
現在Vue.jsを勉強中です。
セレクトボックスを配置してページを表示する時、処理を行った結果をセレクトボックスに反映させたいのですが、うまくいきません。
実現したい事としましては、現在の年月を取得し、1年(12ヶ月)後までのセレクトボックスを作りたいです。
今が2019年08月だとしたら、2020年07月までのセレクトボックスを表示出来るようにしたいです。
(下記ソースでは、とりあえずセレクトボックスに何かを表示させてみようと思い、1月分の値を手動で入れるようにしています)
初歩的な質問かもしれませんが、よろしくお願い致します。
発生している問題・エラーメッセージ
dataの中で空のoptions配列を用意し、methodsの中でopthionsの要素を手動で入れておりますが、値が代入されていないように見えます。(console.logで中身を見ても何も入ってないように見えます)
該当のソースコード
作ったvueファイルは下記の通りです。
<template> <div id="wrr"> <p>test</p> <p>{{ year }}</p> <button @click="nextyear">次年</button> <span>年月を選択</span> <select v-model="options.name"> <option disabled value="年月を選択して下さい" selected>年月を選択して下さい</option> <option v-for="option in options" v-bind:value="option.name" v-bind:key="option.id"> {{ option.name }} </option> </select> </div> </template> <script> export default { name: 'WRR', data () { return { year: 2019, selected: '', options: [], } }, methods: { window:onload = function () { this.options = { id: 1, name: '2019年08月' } console.log('options = ' + this.options) }, nextyear () { this.year += 1 } } } </script>
試したこと
window:onloadの中で記述が行けないのかなと思い、created()やmounted()等を用意してそちらに記述してみましたが変わりませんでした。
ボタンを設置してyearの値を増やす処理を入れると、クリック時に値は増えるので代入は出来ると思っています。
セレクトボックスの場合も、代入していて処理は似ているのに違いがいまいち理解できませんでした。
補足情報(FW/ツールのバージョンなど)
vue 3.9.3
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/03 14:24
2019/08/03 19:33