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

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

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

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

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

【Vue.js + Django】フォームを送信するとプルダウンメニューが初期化されてしまう

TKG000
TKG000

総合スコア5

Vue.js

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

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1回答

0グッド

0クリップ

147閲覧

投稿2022/11/18 09:57

編集2022/11/18 09:58

前提

現在Vue.js と Djangoを使用してwebアプリの開発を行っています。

質問内容

以下のような画面に関しての質問です。
プルダウンメニューでテストの科目を絞り込んでテストをできるようにしたいのですが、フォームの送信ボタン(正解 or 不正解)をクリックしてページがリロードされると、プルダウンメニューで選択していた科目名が初期化されてしまいます。

やりたいこととしては、フォームを送信してページがリロードされても、プルダウンメニューで選択した項目は記憶しておきたいです。
そのためにどのようなコードを書けばいいのかわからないため、ご教示いただきたいです。

よろしくお願いいたします。

イメージ説明

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

TKG000

2022/11/20 11:29

まだ解決できてはいないのですが、プルダウンメニューの値をクッキーに保存し、フォーム送信後にクッキーから取り出してそれをプルダウンの初期値とする方法を考えています。 その方法をご教授いただきたいです。 宜しくお願いいたします。

回答1

0

自己解決

以下のようにプルダウンメニューに変更があった場合にその内容をCookieに登録して、そのページが読み込まれた際(mounted)にCookieから登録した値を取り出し、プルダウンメニューの初期値に設定することで解決できました。

HTML

1<div id=show> 2 <select @change="detectChange" v-model="selected"> 3</div>

JavaScript

1new Vue({ 2 el: '#show', 3 delimiters: ['[[', ']]'], 4 data: { 5 subjects: subjectList, 6 selected: '', 7 8 }, 9 10 /* ページ読み込み時に実行される部分 */ 11 mounted: function(){ 12 //Cookieを全て取得 13 var cookies = document.cookie; 14 15 //取得したCookieを分割する 16 var cookiesArray = cookies.split(';'); 17 var cookie = -1; 18 for(var c of cookiesArray){ 19 var cArray = c.split('='); 20 if(cArray[0] == 'pulldown'){ 21 //console.log(cArray); 22 cookie = cArray[1]; 23 } 24 } 25 //確認部分--指定したidの後にCookieの内容を表示する-- 26 /* let e = document.getElementById('###'); 27 e.insertAdjacentHTML('afterend', '<p>' + document.cookie + '</p>'); 28 e.insertAdjacentHTML('afterend', '<p>' + cookie + '</p>'); */ 29 30 /* プルダウンの初期値設定 */ 31 if(cookie === -1){ 32 //cookieに何も登録されていない時 33 this.selected = '全て'; 34 }else{ 35 this.selected = cookie; 36 } 37 38 var tests = []; 39 //フィルタを掛けてデータを抽出する 40 for(let i=0;i<testList.length;i++){ 41 if(this.selected=== '全て'){ 42 tests.push(testList[i]); 43 }else if(this.selected === testList[i].subject){ 44 tests.push(testList[i]); 45 } 46 } 47 this.test = tests[Math.floor(Math.random()*tests.length)]; 48 }, 49 methods: { 50 /* テスト画面で解答を表示させる処理 */ 51 changeShow: function() { 52 this.isActive = !this.isActive; 53 }, 54 /* プルダウンメニューと同期させる処理 */ 55 detectChange: function(e) { 56 /* 初期化 */ 57 var tests = []; 58 //プルダウンの値を確認する 59 //console.log(e.target.value); 60 61 //cookieにプルダウンの値を登録する 62 document.cookie = 'pulldown=' + e.target.value; 63 64 //フィルタを掛けてデータを抽出する 65 for(let i=0;i<testList.length;i++){ 66 if(e.target.value=== '全て'){ 67 tests.push(testList[i]); 68 }else if(e.target.value === testList[i].subject){ 69 tests.push(testList[i]); 70 } 71 } 72 this.test = tests[Math.floor(Math.random()*tests.length)]; 73 }, 74 }, 75 })

投稿2022/11/23 01:48

編集2022/11/23 01:49
TKG000

総合スコア5

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。