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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1774閲覧

vue.jsとelement-uiのdatepickerの使用方法について

gomengo

総合スコア51

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/10/18 04:38

編集2017/10/19 01:40

vue.jsとelement-uiのdatepickerを使用し下記のようなファイルを作成いたしました。
element-ui datepicker

①このように作成した日付の表なのですが、日付のinput textの属性にnameがないのですが、これは、どのようにサーバー側で値を取得するのでしょうか。
中国語なので、詳細は分かりませんが下記のリンクような状態です。
リンク

②今現在、listのjsonをv-forで回しているのですが、この場合、日付のtd属性などにclassやidをidx属性を付与して作成する場合、どのように記載すればよいのでしょうか。

html

1 <table> 2 <tr> 3 <th colspan="1">No.</th> 4 <th colspan="1">FROM</th> 5 <th colspan="1">TO</th> 6 <th colspan="1">種別</th> 7 </tr> 8 9 <tr v-for="(val, idx) in list"> 10 <td colspan="1">1</td> 11 <td colspan="1"><el-date-picker name="from_date" type="date" placeholder="日付の選択" :value="val.from_date" v-model="val.from_date"></el-date-picker></td> 12 <td colspan="1"><el-date-picker name="to_date" type="date" placeholder="日付の選択" :value="val.to_date" v-model="val.to_date"></el-date-picker></td> 13 <td colspan="1"> 14 <select name="Section[]" class="form-control input-sm" v-model="val.selected"> 15 <option v-for="option in options" v-bind:value="option.value"> 16 {{ option.text }} 17 </select> 18 </td> 19 </tr> 20 21 </table>

js

1<script> 2 new Vue({ 3 el: '.test', 4 selected: 1, 5 data: { 6 list: [ 7 { from_date: '2011-01-06', to_date: '2015-02-03', selected: 1 }, 8 { from_date: '2012-02-07', to_date: '2016-03-04', selected: 2 }, 9 { from_date: '2013-03-08', to_date: '2017-04-05', selected: 3 }, 10 { from_date: '2014-04-09', to_date: '2018-05-06', selected: 4 }, 11 ], 12 13 }, 14 methods: { 15 16 }, 17 } 18 }); 19</script> 20

このようは場合、jsonをhiddenで隠してpostするのが一般的なのでしょうか?
よろしくお願いいたします。

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

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

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

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

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

karamarimo

2017/10/19 07:10

「どのようにサーバー側で値を取得するのでしょうか」とは、datepicker の値をどのようにフォームのようにsubmitすることができるか、ということでしょうか。また、json のまま送るのはナシでしょうか。
gomengo

2017/10/19 07:24 編集

vue.jsなどを使用しない場合は、postでデータを送信した場合、PHPであると$_POSTで + name属性できる思います。vue.jsを初めて使用しているのですが、このelement-ui datepickerは基本的にvue.jsのdataをhiddenして利用することをPOSTすること想定しているのかわからなくて質問しました。こういう場合はjsonをPOST送信するのが一般的なのでしょうか?また、普通にname属性などをつけてPOSTできるやり方があるのであれば、それも知りたいと思って質問しました
guest

回答1

0

ベストアンサー

<form>はデフォルトでapplication/x-www-form-urlencodedの形式で送ります。

PHPは全然知らないのですが、この形式だと$_POST[name]でフォームデータにアクセスできるみたいです。json形式でPOSTすると$_POST[name]ではアクセスできないですが、この回答にあるように自分でデコードすればいいようです。
https://stackoverflow.com/a/18867369/7387340

このelement-ui datepickerは基本的にvue.jsのdataをhiddenして利用することをPOSTすること想定しているのか

そんなことはないと思います。せっかくVue.jsを使っているので、jsで送りましょう。
jsonで送るか、jsでapplication/x-www-form-urlencoded形式にエンコードして送るかすればいいと思います。

ajaxライブラリによってはその形式にエンコードする機能があります(superagentなど)ので、使ってみてはどうでしょうか。

②今現在、listのjsonをv-forで回しているのですが、この場合、日付のtd属性などにclassやidをidx属性を付与して作成する場合、どのように記載すればよいのでしょうか。

v-bindでできます。(:v-bind:のshorthandです)

lang

1<div :id="'div-' + {{item.id}}">

投稿2017/10/19 10:09

編集2017/10/19 10:10
karamarimo

総合スコア2551

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

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

gomengo

2017/10/20 08:59

コメントありがとうございます。 postの方法についてですが、https://qiita.com/okakam/items/2ad69ea7a84e75cc9c05 のような形式で、送信しようと思います。 element-ui datepickerのinput textのname属性についてですが、下記のように記載するとname属性が付与されました。 <el-date-picker name="term" id="term" v-model="term" type="daterange" placeholder="日付を選択してください"><input type="text" name="test" /></el-date-picker> 今回は、ありがとうございました。
gomengo

2017/10/24 08:38

上記のリンクのように、 var URLSearchParams = require('url-search-params'); して、 URLSearchParams.append("id", 1); するような形で使用するのでしょうか?
karamarimo

2017/10/24 08:58 編集

requireはWebpackなどのバンドリングツールを前提としたものなので、直接 <scirpt> タグ内では使えません。 そのようなツールを使っていないなら cdn で読み込みます。 https://cdnjs.com/libraries/url-search-params にある url-search-params.js がそれ用です。これを <script src="..."> を読み込めば以降で"URLSearchParams "が使えると思います。
gomengo

2017/10/25 01:52

ありがとうございます。 承知いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問