Vue.jsでのフォーカスが外れた時のCSS処理

Question

前提・実現したいこと

テキスト入力欄が未入力のままでフォーカスが外れると、
テキスト欄のborderを緑にしたいです。
あくまでフォーカスが外れた時にヌル判定をして緑にしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div id="app">
<input type="text" v-model="txt" :style="Style" @blur="Error">
</div>

<script>
    var app = new Vue({
      el: '#app',
      data: {
        txt: "",
        blank: false
      },
      
      methods: {
       
        Style: function(){
          return {
            'box-shadow': this.blank ? '0 0 7px green' : '',
            'border': this.blank ? '2px solid green' : ''
          }
        },

        Error: function(){
          if(this.txt === ''){
            this.blank = true;
          }
        },

      }

    });

  </script>

試したこと

根本的にVue.jsの理解が足りていないと自覚しております。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こちらでいかがでしょうか。

* computedを使う
* Errorメソッドに文字数が1文字以上になった場合の処理を追記する

https://codepen.io/yuhigash/pen/gOYJvPX

Comments

[dejikin]

出来ました！！
computed にまで思いが至りませんでした。精進します。

本当にご回答ありがとうございました！