週Vue.jsでclassがある場合とない場合でテキストを変更したい

Question

一部不具合を含んだコードや誤った記述があったため、質問を削除しました。再度調べ直して投稿します。

Comments

[gogoweb_ikeda]

disabledクラスはあらかじめHTML内に記述されているのでしょうか？
それともVueJS内で付与されますか？（その場合そのタイミングでisSeminarDisabledの値を変更してください）
それともjQuery等からクラスを追加してそれをVueに反映させたいのでしょうか？

[MH00214]

disableクラスは

```
<div class="inquiry-form-inner <%= disabled_class("disabled") %>">
この中にformがある
</div>
```
という形で記載してあります。

<%= disabled_class("disabled") %>はRailsのなかでhelperを定義して、「受付終了」の場合はdisabledを付与するようにしています。

[Arice_Banan]

disabledクラスはVueインスタンスが生成され、DOMを生成し終わった後に、
無くなったり、着いたりしますか？

無くなったり、着いたりしないのであれば、
Vueインスタンスがmountedした時に、
disabledクラスが付与された要素をgetElementして、
isSeminarDisabledを設定できると思います。

[MH00214]

DOMを生成し終わった時から見ると、そこから消えたりということはないです。上記のコードの通り、このdisabledというクラスはRailsのhelperメソッドを使って、このページが「受付終了なのかそうでないのか」を判断してから付与されます。なのでDOMを生成した後に何か処理が起こるということはありません！

> 無くなったり、着いたりしないのであれば、
> Vueインスタンスがmountedした時に、
> disabledクラスが付与された要素をgetElementして、
> isSeminarDisabledを設定できると思います。

とのことでしたので、
mounted: function() {
const isSeminarDisabled = this.$refs.inquiryFormInner.classList.contains('disabled');
if(isSeminarDisabled) {
this.isSeminarDisabled = true
}
},
computed: {
submitValue: function() {
if (this.isSeminarDisabled) {
return "受付終了しました"
}
return "申し込む"
},
},
のような形でやれば良いですかね？
getElementsByClassNameとかでも良さそうですが。

Answer 1

ご確認ありがとうございます。

のような形でやれば良いですかね？

はい。私が思っていた通りです。

・一応動くという意味ではできたんですが、これで良いのかご指導いただけると助かります。

・getElementsByClassNameとかでも良さそうですが。

私も指導出来るほど習熟していないので、「私なら」で申し訳ないですが、

私なら、「disabledクラスが付与される要素に、idを振って、それをgetElementByIdします。」

なぜなら、Vueはインスタンス内のデータをもとにDOMを生成・変更するフレームワーク(だと思っている)なので、
この、インスタンス内のデータは必ず一つの状態(disabledクラスが付与される要素)をもとに、データを定義されるべきだと思っているからです。

一応サンプルも載せておきます。

    <div id="hoge" class="disabled">
      <form action="" class="disabled">
        <div id="app2">
          <input
            id="input2"
            type="submit"
            name="submit"
            :value="submitValue"
            class="novasell-inquiry-form-submit-button"
          />
        </div>
      </form>
    </div>

  var app2 = new Vue({
    el: "#app2",
    data: {
      isSeminarDisabled: false
    },
    mounted: function() {
      const hoge = document.getElementById("hoge");
      console.log(hoge.classList);
      if (hoge.classList.contains("disabled")) {
        this.isSeminarDisabled = true;
      }
    },
    computed: {
      submitValue: function() {
        if (this.isSeminarDisabled) {
          return "受付終了しました";
        }
        return "申し込む";
      }
    }
  });