vue.js セレクトボックスで表示内容を変更したい

Vue.js初心者です。
１つのセレクトボックスを変更したら、div要素が変更されるようなコードが書きたいです。

①セレクトしたらchangeイベントを発火させる
②changeイベントで表示する値を変える
以上のような流れかと思っていますが、中々上手く行きません。
アドバイスを頂けますでしょうか？
よろしくお願い致します。


<template>
  <div class="card-body">
    <div class="form-group">
      <label for="selectOptions">選択</label>
      <select
        class="form-control"
        id="selectOptions"
        v-model="selectedKey"
        @change="selected"
      >
        <option v-for="val in selectItems">{{ val }}</option>
      </select>
    </div>

    <div v-show="contentsA">
      <b style="color:red;">A</b>
    </div>

    <div v-show="contentsB">
      <b style="color:blue;">B</b>
    </div>

    <div v-show="contentsC">
      <b style="color:green;">C</b>
    </div>

  </div>
</template>

<script>
export default {

  data: () => {
    return{

      selectedKey: '',
      selectItems: ['A', 'B', 'C'],

      ContentsA: false,
      ContentsB: false,
      ContentsC: false

    }
  },

  methods: {
    selected: (val) => {
      this.selectedKey = val.value;
    }
  }

}
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

直接判定したら？

html
1    <div v-show="selectedKey=='A'">
2      <b style="color:red;">A</b>
3    </div>
4
5    <div v-show="selectedKey=='B'">
6      <b style="color:blue;">B</b>
7    </div>
8
9    <div v-show="selectedKey=='C'">
10      <b style="color:green;">C</b>
11    </div>

投稿2021/12/02 07:24

sousuke

総合スコア3830

tktail

2021/12/02 10:26

ありがとうございます。直接判定する方法は思いつきもしませんでした。 ABCは日本語の文字列を入れる予定だったので、数字で判別した方がいいような気もしますが、動いているから良しとしてこの度は助かりました。ありがとうございます。

sousuke

2021/12/03 01:00

<option v-for="(val,i) in selectItems" :value='i'>{{ val }}</option> valueにバインドしたらselecetkeyはvalueになるし数字とる方法もあるよ。

tktail

2021/12/03 02:33

なるほどvalueにバインドしてあげたらよかったんですね！ありがとうございます！！ selectの外で読むのは無理なのかなと思ってました。。勉強になります！

行動規範の内容に同意します

ナニをしたいのかよくわかりませんが。こういうことなのでわ?

diff
1    <div v-show="contentsA">
2 ...
3-      ContentsA: false,
4+      contentsA: false,
5 ...
6  methods: {
7    selected: (val) => {
8-      this.selectedKey = val.value;
9+      this.contentsA = this.selectedKey === 'A';
10    }