現在以下のような挙動を作ろうとしています。
・JSONからフォームを生成する。
・その生成されたフォームに入力および値を選択し、そこから更にJSONにする。
下記参考画像は実際にJSONからフォームを生成したフォームです。
ここに例えば、郵便番号に111、住所に東京を入力して、更に以下のようなフォーマットを生成したいです。
{
"郵便番号": "111",
"住所": "東京",
"性別":"男性",
"好きなもの":"りんご"
}
現状のソースコードでは、
selectボックスの部分はなんとなく値が取れているのですが(console.logを参照)、
郵便番号と住所、つまりcolumn_methodが文字の場合に生成される
テキスト入力からは、うまくデータ(上記例で言えば、111および東京)を取得できません。
その方法をご教授して頂ければ幸いです。
参考画像
上記参考画像の現状のソースコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>質問</title> <style type="text/css"> [v-cloak] { display: none; } </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <div> <div v-cloak> <!-- 繰り返し --> <div v-for="property in propertys"> <label>{{property.column}}</label> <!-- column_methodが文字の場合はテキストフォーム --> <div v-if=" '文字'==property.column_method "> <input type="text"> </div> <!-- column_methodが選択式の場合はセレクトボックス --> <div v-else> <select v-on:change="setValue(property.column, $event.target.value)"> <option v-for="child in property.childs"> {{child.labelname}} </option> </select> </div> </div> </div> </div> <pre> {{$data.propertys}} </pre> </div> <script> var JsonData = [{ "column": "郵便番号", "column_method": "文字", "childs": [] }, { "column": "住所", "column_method": "文字", "childs": [] }, { "column": "性別", "column_method": "選択式", "childs": [{ "labelname": "男性" }, { "labelname": "女性" } ] }, { "column": "好きなもの", "column_method": "選択式", "childs": [{ "labelname": "りんご" }, { "labelname": "ばなな" }, { "labelname": "パイナップル" } ] } ]; new Vue({ el: '#app', data: { propertys: JsonData, }, methods: { setValue(column, labelname) { console.log(column + ":" + labelname) }, } }) </script> </body> </html>
参照ページ
https://stackoverflow.com/questions/47941002/select-from-json-use-radio-input-in-vue-js
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/23 01:07