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

Question

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

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

var app = new Vue({
  el: '#app',
  data: {
    selected: '',
    sizes:["small", "medium", "large"]
  }
})

<div id="app">
  <select v-model="selected">
    <option v-for="size in sizes" :key="size">{{ size }}</option>
  </select>
  <button class="{{ selected }}">ボタン</button>
</div>

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

Answer 1

エラーが出てしまいます。

質問をするときはエラーメッセージを記載してください。

option の開始タグの表記が明らかにおかしいですが、これでしょうか？

 <div id="app">
   <select v-model="selected">
-    option v-for="size in sizes" :key="size">{{ size }}</option>
+    <option v-for="size in sizes" :key="size">{{ size }}</option>
   </select>
   <button class="{{ selected }}">ボタン</button>
 </div>

追記

英文のエラー（警告）メッセージにあるとおりですね。

<div id="app">
  <select v-model="selected">
    <option v-for="size in sizes" :key="size">{{ size }}</option>
  </select>
  <button :class="selected">ボタン</button>
</div>

変数を {{ value }} で展開しても良いですが、 HTMLタグの属性に関しては :class="value" で展開可能なのでそちらを使いましょう、ということですね。

Comments

[yae]

すみません、入力ミスをしていたので修正しました。
以下、エラー内容です。

vue.js:634 [Vue warn]: Error compiling template:

class="{{ selected }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

3 | <option v-for="size in sizes" :key="size">{{ size }}</option>
4 | </select>
5 | <button class="{{ selected }}">ボタン</button>
| ^^^^^^^^^^^^^^^^^^^^^^
6 | </div>

(found in <Root>)