vue.js でselectの生成、ajax版、オブジェクトの場合
セレクトを生成するためのデータがこういう、
productOptions: {
A: [
{text: "pen", value: "PEN"},
{text: "pencil", value: "PENCIL"}
],
B:[
{text: "apple", value: "APPLE"},
{text: "pinapple", value: "PINAPPLE"}
]
}
オブジェクトだったらどうなるだろう。上記のデータはイメージとして、一つ目のセレクトでAを選んだら二つ目のセレクトがpen, pencilになる、というようなものである。
jsonを返すphpがproduct.phpが存在するとして、
axios.get('product.php').then(function(response) {
for (var key in response.data) {
productOptions[key] = response.data[key];
}
}).catch(function(error) {
console.log('failure:' + new Date())
});
これでどうだろうか。
vue.js でselectの生成、selectの値をajaxで取ってくる版
ajaxについてはvue.jsではaxiosというのが推奨されている、とのことです。
なんでとりえあず、html側にaxios追加。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <select v-model="category"> <option value="">--選択してください--</option> <option v-for="option in catOptions" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>first Selected: {{ category }}</span> </div>
んで、jsの方はこんな感じになるのかな。
var app = new Vue({
el: '#app',
data: {
category: '',
catOptions: []
},
created: function() {
var catOptions = this.catOptions;
axios.get('category.php').then(function(response) {
for (var i = 0; i < response.data.length; i++) {
catOptions.push(response.data[i]);
}
}).catch(function(error) {
console.log('failure');
})
}
});
![Webで使える！SVGファーストガイド [ 相澤裕介 ]](http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3497/9784877833497.jpg?_ex=128x128 "Webで使える！SVGファーストガイド [ 相澤裕介 ]")
vue.js でselect の生成、その２。動的に生成する。
で、引き続き、一つ目のセレクトを選ぶとそれに応じて二つ目のセレクトが生成される、というのに挑戦。
html側。
<div id="app"> <select v-model="category" v-on:change="resetSelect"> <option value="">--選択してください--</option> <option v-for="option in catOptions" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>first Selected: {{ category }}</span> <select v-model="product" > <option value="">--選択してください--</option> <option v-for="option in productOptions[category]" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>second Selected: {{ product }}</span> </div>
js側。
var app = new Vue({
el: '#app',
data: {
category: '',
product: '',
catOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }
],
productOptions: {
A: [
{text: "pen", value: "PEN"},
{text: "pencil", value: "PENCIL"}
],
B:[
{text: "apple", value: "APPLE"},
{text: "pinapple", value: "PINAPPLE"}
]
}
},
methods: {
resetSelect: function(){
this.product = '';
}
}
});
v-on:change="resetSelect" の部分とか、<option value="">--選択してください--</option> の空の選択部分とかはなくてもそれなりに動くし、その方がスマートな気もするんだが、やってみてもらうと分かるんだがなんとなく動きがヘンである。
一旦選んでしまうと一旦選択を空にしてやり直すことができない、ってのもなんか気になる。
vue.js でselectの生成
検索するとバージョン0.11の頃の書き方がヒットして混乱するが、v2では
var app = new Vue({
el: '#app',
data: {
selected: 'B',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
と書く。HTML側は、
<div id="app-8"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div>
vue.js で v-on:change で複数のファンクションを呼ぶには？
参考： https://stackoverflow.com/questions/38744932/how-to-call-multiple-function-with-v-onclick
<input v-on:change="calcAmount, calcSum">
というように書けるのかなと思ったが、だめらしい。
<input v-on:change="calcBoth">
としておいて、
methods: {
calcBoth: function () {
this.calcAmount();
this.calcSum();
}
}
とするようだ。
Vue.js 2 Cookbook: Build modern, interactive web applications with Vue.js
- 作者: Andrea Passaglia
- 出版社/メーカー: Packt Publishing
- 発売日: 2017/04/28
- メディア: Kindle版
- この商品を含むブログを見る
既存のアプリへの vue.js の組み込み
<div id="app"> <p>{{text}}</p> </div>
ファイル名 app.jsとして以下の内容。
var Vue = require("vue");
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
基本的にはこれだけのソースでとりあえず動作確認ができるのだけど、webpackとか使うのでいろいろ障害がある。
まずは最低限、vue.jsをインストールしておかないといけないので、package.jsonに
"devDependencies": { "vue": "*" }
と書くか、あるいは直接
npm install vue --save-dev
などとやる。ここまでは問題ないと思うが。 webpack.config.js に以下のように追記する。
module.exports = {
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
};
これを忘れると、
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
というエラーが出る。
そして、実際にhtmlから読み込むためのファイルを作る。 ファイル名bundle.jsとして、wbpackで合体さす。
webpack app.js bundle.js
で、jsをHTMLの中のどこで読み込むかというのも重要で、
上の方で読み込んだりすると、
[Vue warn]: Cannot find element: #app
というようなエラーが出る。
