つくりたいもの

フォーム入力で、email の「@」以降の文字を打つと、ドメインがサジェストされる機能
以下の画像のようなイメージ

ソースコード

以下のように datalist を使っています。
option の :value にメソッドを渡しているのですが、これで動くということを初めて知りました。

html

<input type="text" placeholder="hoge@example.com"
       list="suggestions" v-model="emailValue">
<datalist id="suggestions">
  <option v-for="domain in domains" :value="getSuggest(domain)"></option>
</datalist>

「@」が一つだけのときに、サジェストが発動するように length === 1 をチェックしています。

JavaScript

{
  data() {
    return {
      emailValue: '',
      domains: [ 
        "@gmail.com",
        "@yahoo.co.jp",
        "@au.com",
        "@yahoo.com"
      ]
    }
  },
  methods: {
    getSuggest: function (domain) {
      if ((this.emailValue.match(/@/g) || []).length === 1) {
        const emailUserName = this.emailValue.split('@')[0]
        return emailUserName + domain
      } else {
        return null
      }
    }
  }
}

以上です。