速習vue.jsという本を読んでいて、以下のサンプルコードが出てきました：
お題
<!DOCTYPE html>
<html lang="ja">
<body>
<div id="app">
<form>
<label for="name">メールアドレス：</label>
<textarea v-bind:value="emails.join(';')" v-on:input="emails = $events.target.value.split(';')"></textarea>
<ul>
<li v-for:"email in emails">{{ email }}</li>
</ul>
</div>
</body>
</html>
new Vue({
el: '#app',
data: {
emails: []
}
});
これを算出プロパティとしたほうが良い書き方、と合ったので試してみました。
ダメだったコード
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title>騾溽ｿ歎ue.js</title>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id='app'>
<form>
<textarea v-bind:value="joinedEmail" v-on:input="splitEmails($event.target.value)" cols="80" rows="10"></textarea>
</form>
<ul>
<li v-for="email in emails">{{ email }}</li>
</ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js'></script>
<script src='./hello.js'></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
emails: ['foo@foo.com','bar@bar.com'],
},
computed: {
joinedEmail: function() {
return this.emails.join(';');
},
splitEmails: function(value) {
this.emails = value.split(';');
}
},
methods: {
}
});
なぜダメなのかまだ完全に理解できていませんが、computedではそもそも、引数を渡せないみたいです。
ちなみにsplitEmails関数をmethodsに移動させると動きます。
動くコード
setterを使うことで実現できました：
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title>速習Vue.js</title>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id='app'>
<form>
<textarea v-bind:value="joinedEmail" v-on:input="splitEmails = $event.target.value" cols="80" rows="10"></textarea>
</form>
<ul v-cloak>
<li v-for="email in emails">{{ email }}</li>
</ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js'></script>
<script src='./hello.js'></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
emails: ['a@a.com','b@b.com'],
myval: ''
},
computed: {
joinedEmail: function() {
return this.emails.join(';');
},
splitEmails: {
set: function(value) {
this.emails = value.split(';');
}
}
},
methods: {
}
});
とりあえず動くようになりましたが、動作原理をちゃんと理解せねば…
