v-forでのclass付与について

Question

Vue.jsについて質問です。

<select>に対してv-forを使いセレクトボックスを作りました。

  <script>
    new Vue({
      el: '#app',
      data: {
        selected: '',
        sizes:["small", "medium", "large"]
      },
      computed: {
        isSmall: function() {
          if(selected == small) return true;
          else return false;
        },
        isMedium: function() {
          if(selected == medium) return true;
          else return false;
        },
        isLarge: function() {
          if(selected == large) return true;
          else return false;
        }
      }
    })
  </script>

  <div id="app">
    <select v-model="selected">
      <option v-for="size in sizes" :key="size">{{ size }}</option>
    </select>
    <button v-bind:class="{ small: isSmall, medium: isMedium, large: isLarge }">ボタン</button>
    <p>{{ selected }}</p>
  </div>

セレクトボックスで選択したものをbutton要素のclass名にしたいのですがエラーが出てしまいます。
どのように書けば良いでしょうか？

エラー
[Vue warn]: Error in render: "ReferenceError: selected is not defined"

Answer 1

thisが必要なのでは?

        isSmall: function() {
-          if(selected == small) return true;
+          if(this.selected == small) return true;
          else return false;
        },

# まぁ、なおしたとして、こんどはsmallがないと言われるでしょうね。

そもそもreturn true/falseなんて不要かと。

        isSmall: function() {
          return (selected == small);
        },