honapon
@honapon

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Vue.js emitの基本的な使い方についてお伺いしたいです。

emitの使い方について質問です。

現在Vue.js3を用いて入力フォームの実装をしています。
「入力完了」ボタンを押下したタイミングで子コンポーネント「Buttons」の「toConfirm」イベントを発火させ、
変数「page」をinputからconfirmに変更することで
v-ifを用いたページの切り替えを成功させたく思っています。HTML部分

<buttons :page="page" @to-confirm="page ='confirm' />

とするとうまく切り替わるのですが

<buttons :page="page" @to-confirm="page ='confirm' />
としてmethods部分に
confirm(){
    page ='confirm'
  }
と書くと
Uncaught ReferenceError: page is not defined

とエラーが出てきてしまいます。
他にも複数イベントを書きたいのでmethodsを利用したコードを書きたいのですが
うまく行かず困っています。
原因についてご教授いただけるととても嬉しいです。

親コンポーネントの該当コードは以下になります。


<script>部分

export default {
  name: "・・・・・",
  components: { ・・・・・・・},
  props: {
    page: { 
      type: String,
      default: 'input'
    }
  },
・・・・・


HTML部分
<terms  v-if = "page =='input'"  />
    <buttons :page="page" @to-confirm="confirm" />//この部分です

0

2Answer

Comments

  1. @honapon

    Questioner

    回答ありがとうございます!
    今回は解決に至りましたが、皆様が再現することを考えていなかったので全体を載せるようにしたいと思います。

エスパーします!
おそらく使われているのはOptions APIだと思われるので

confirm() {
    this.page = 'confirm'
}

とするとどうでしょうか👀

0Like

Comments

  1. 老婆心から言わせていただくと、コードブロックの言語指定(シンタックスハイライト)や、コードブロックのファイル名指定をしておくと、回答者も答えやすくなると思います👍✨
  2. @honapon

    Questioner

    ご丁寧にありがとうございます!おっしゃって頂いた通り、thisが抜けておりました。他の部分でも抜けていたので、やはり質問時には極端に長くならない程度に全体コードを載せることも気をつけたいと思います。
    答えやすい質問方法についても教えて頂きありがとうございます! 対面で質問する時にも大切なポイントだと思うので参考にさせて頂きます。

Your answer might help someone💌