質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

1回答

1315閲覧

vue.jsのセレクトボックスの表示について

Hibachi

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2019/08/03 09:26

前提・実現したいこと

現在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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じでいかがでしょうか?

投稿2019/08/03 11:28

編集2019/08/03 11:53
nico25

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hibachi

2019/08/03 14:24

ご回答ありがとうございます! やりたかった動作そのものでした! data()の中の変数定義的な箇所でfunctionも呼べるのですね。知らなかったです。 勉強になりました。
nico25

2019/08/03 19:33

そう言って頂けると嬉しいです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問