理系公務員のプログラミング日記

解説は後日追記

App.vue

<template>
  <Que que="日本で２番目に高い山は？" />
  <Ans ans="富士山" />
  <Ans ans="北岳" />
  <Ans ans="立山" />
  <Ans ans="剱岳" />
</template>

<script>
import Que from "./components/Que.vue";
import Ans from "./components/Ans.vue";

export default {
  name: "App",
  components: {
    Que,
    Ans,
  },
};
</script>

Que.vue

<template>
    <div>{{ que }}</div>
</template>

<script>
export default {
    name: "Question",
    props: {
        que:String
    },
}
</script>

Ans.vue

<template>
    <div ref="ans" v-on:click="doAction">{{ans}}</div>
</template>

<script>
export default {
    name: "Ans",
    props:{
        ans:String
    },
    // data(){

    // },
    methods: {
        doAction(){
            if (this.ans === "北岳"){
            this.$refs.ans.innerHTML = "正解";
            }
        }
    },
}
</script>