vue.js クリックイベントが行われたら画像を表示したい

Question

onClickCheckが呼ばれたら <img src="/images/select.svg" />を表示/非表示できるようにしたいです。
どうやって実装したらいいのかがわからず困っています。
わかる人がいましたらご教授お願いしたいです。

      <div
        v-for="question in question.group[0].statuses.selections"
        :key="question.id"
        @click="onClickCheck()"
        class="answer"
      >
        <p class="answer_select">{{ question.name }}</p>
        <img src="/images/select.svg" />
      </div>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import test from '@/assets/test.json'

@Component
export default class QuestionPage extends Vue {
  question: any = []
  created() {
    this.questionary = test
  }

  onClickCheck() {

 }
}
</script>

Comments

[sousuke]

questionにフラグでもいれてやればいいのではないでしょうか？
別にvueでなくてもhtmlとcssだけでもできますよね。
「こう」してみたけど、「これ」がうまくいかないとか何かしないと
それはただの作業依頼ですよ。

Answer 1

Vue.jsには、<img src="/images/select.svg" v-show-"imageFlg"/>のように、表示・非表示に適した機能があります。（太字の部分）

この例で進めると、
①　imageFlg(boolean型)を定義する。
②　@click="imageFlg != imageFlg"をクリックするところに書く。(表示以外の処理をとくにしないなら、わざわざonClickCheck()と定義しなくてもOKです。)

これで、実装できると思います。（多分）

的外れな回答でしたら、申し訳ありません。