Vueの双方向データバインドのカスタマイズについてメソッドを利用したい

Question

これからはじめるVue.js3実践入門の3-2-9双方向データバインドのカスタマイズの内容です。本ではそのまま書いてますが、メソッドを利用して書きたいです。内容は入力されたメールアドレス（;区切り）を分割し、配列としてmailsプロパティに反映させる、です。

エラー内容
テキストエリアにfunction Emailjoin() {
[native code]と表示される。メールアドレスと；を入力しても分割して表示されない。

html

<div id="app"> <form> <label for="mail">メールアドレス：</label> <textarea id="mail" v-bind:v-on:input="mails=Emailsplit" v-bind:value="Emailjoin" ></textarea> </form> <ul> <li v-for="mail in mails"> {{ mail }} </li> </ul> </div>

javascript
Vue.createApp({
data(){
return{
mails:[],
};
},

methods:{
Emailjoin(){
return this.mails.join(';');
},
Emailsplit(e){
return e.target.value.split(';');
}
}
}).mount('#app');

Answer 1

v-bind:value="Emailjoin"

を

v-bind:value="Emailjoin()"

したらどうですか？

methodで定義してるので()つけて呼び出す必要あったと思います。
computed propertyの場合は()つけなくてもOKだった気が。

Vueは長らく触ってないのでうる覚えですが。。。

v-bind:v-on:input="mails=Emailsplit"

それとここも同様かな？？？

Comments

[miraimirai]

変更したところ、何も表示されなくなりました。