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

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

ただいまの
回答率

90.76%

  • JavaScript

    15352questions

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

  • Vue.js

    585questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,152

gomengo

score 35

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

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

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

            <table>
                <tr>
                    <th colspan="1">No.</th>
                    <th colspan="1">FROM</th>
                    <th colspan="1">TO</th>
                    <th colspan="1">種別</th>
                </tr>

                <tr v-for="(val, idx) in list">
                    <td colspan="1">1</td>
                    <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>
                    <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>
                    <td colspan="1">
                        <select name="Section[]" class="form-control input-sm" v-model="val.selected">
                                <option v-for="option in options" v-bind:value="option.value">
                                {{ option.text }}
                        </select>
                    </td>                  
                </tr>

            </table>
<script>
    new Vue({
        el: '.test',
        selected: 1,
        data: {
            list: [
                { from_date: '2011-01-06', to_date: '2015-02-03', selected: 1 },
                { from_date: '2012-02-07', to_date: '2016-03-04', selected: 2 },
                { from_date: '2013-03-08', to_date: '2017-04-05', selected: 3 },
                { from_date: '2014-04-09', to_date: '2018-05-06', selected: 4 },
            ],

        },
        methods: {

            },
        }         
    });    
</script>


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • karamarimo

    2017/10/19 16:10

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

    キャンセル

  • gomengo

    2017/10/19 16:22 編集

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

    キャンセル

回答 1

checkベストアンサー

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です)

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/20 17: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>

    今回は、ありがとうございました。

    キャンセル

  • 2017/10/20 18:07

    その記事ではURLSearchParamsを使用していますが、↓によるとIEやEdgeではサポートされていないのでご注意ください。もしサポートする必要があるならpollyfillをご利用ください。
    http://caniuse.com/#feat=urlsearchparams
    url-search-params
    https://github.com/WebReflection/url-search-params

    キャンセル

  • 2017/10/24 17:38

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

    キャンセル

  • 2017/10/24 17:53 編集

    requireはWebpackなどのバンドリングツールを前提としたものなので、直接 <scirpt> タグ内では使えません。

    そのようなツールを使っていないなら cdn で読み込みます。
    https://cdnjs.com/libraries/url-search-params
    にある url-search-params.js がそれ用です。これを <script src="..."> を読み込めば以降で"URLSearchParams "が使えると思います。

    キャンセル

  • 2017/10/25 10:52

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

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    15352questions

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

  • Vue.js

    585questions

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