vue.jsのフォームで電話番号を結合する方法

Question

こんなことも分らんのかと思われる初歩的で簡単なことだと思いますが、質問させて下さい。

vue.jsでフォームを作成しており、電話番号を３分割してフォーム入力させて、ハイフンで結合したものをデータベースに入れたいと考えています。
そこで、先ずは３つのフォームに入力されたもの連結して表示させてみようと思い、以下のように組んでみましたが、動きません。

<template>
  <div
    class="d-flex justify-center"
  >
    <v-text-field
      v-model="data1"
      outlined
    ></v-text-field>
    <span class="mx-2 pt-3">-</span>
    <v-text-field
      v-model="data2"
      outlined
    ></v-text-field>
    <span class="mx-2 pt-3">-</span>
    <v-text-field
      v-model="data3"
      outlined
    ></v-text-field>
    {{ telNumber }}
  </div>
</template>

<script>
  export default{
    data () {
      return{
        data1: null,
        data2: null,
        data3: null,
        telNumber: null,
      }
    },

    computed:{
      telNumber: {
        this.telNumber = this.data1 + '-' + this.data2 + '-' + this.data3;
      }
    }
  }
</script>

文字列の結合は＋のはずですが、、

お手伝い頂けたら幸いです。
よろしくお願い致します。

変更後

<template>
  <div
    class="d-flex justify-center"
  >
    <v-text-field
      v-model="data1"
      outlined
    ></v-text-field>
    <span class="mx-2 pt-3">-</span>
    <v-text-field
      v-model="data2"
      outlined
    ></v-text-field>
    <span class="mx-2 pt-3">-</span>
    <v-text-field
      v-model="data3"
      outlined
    ></v-text-field>
    {{ telNumber }}
  </div>
</template>

<script>
  export default{
    data () {
      return{
        data1: null,
        data2: null,
        data3: null,
        telNumber: null,
      }
    },

    computed: {
      telNumber () {
        return this.data1 + '-' + this.data2 + '-' + this.data3;
      }
    }

  }
</script>

Answer 1

computedを関数にすれば良いかと思います。

  computed: {
    telNumber () {
      return this.data1 + '-' + this.data2 + '-' + this.data3;
    }
  }

Comments

[tktail]

plasticgrammerさん
ご回答ありがとうございます。
修正してみましたが、やはり動きません。。
修正したコードを貼り付けましたので、確認して頂けますでしょうか？
よろしくお願い致します。

[plasticgrammer]

dataの telNumber は不要となります。
削除すると動きますでしょうか？

[tktail]

動きました！
ありがとうございます！！

もしよろしければ、理解に繋げたいので、解説をお願いすることは可能でしょうか？

[plasticgrammer]

まずcomputedに定義するプロパティは関数とし、計算（編集）された値をreturnする必要があります。
これにより計算に使用している値が変更された場合に、再計算した結果を扱うことができます。

また、dataとcomputeはどちらもコンポーネントに紐づきますので、同名だと問題があります。
（動かなかったとのことですので、重複していた場合はdata側を参照するのかもしれません）

[tktail]

ご丁寧な回答ありがとうございます。
なるほどcomputedはそういった性質があるのですね。
勉強になります。

また行き詰ったときに質問する時があると思いますが、よろしくお願い致します。