teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

修正

2020/11/04 02:12

投稿

MH00214
MH00214

スコア53

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue.jsでclassがある場合とない場合でテキストを変更したい
1
+ Vue.jsでclassがある場合とない場合でテキストを変更したい
body CHANGED
@@ -1,62 +1,1 @@
1
- ## 解決したい問題
2
- フォームのテキストで通常は「申し込む」となっている箇所を、フォームに特定のclassがある場合には「受付終了しました」
3
- に変更したいです。
4
-
5
- ## やっていること・やりたいこと
6
- 下記のようにコードを書いているのですが、checkSeminarStatusの中でDOMを取得してきて、disabledというClassがある場合はisSeminarDisabledをtrueにしてテキストを変えたいです
7
-
8
- ```HTML
9
- <input type="submit" name="submit" :value="submitValue" class="inquiry-form-submit-button">
10
-
11
- ```
12
-
13
- ```Vue
14
- new Vue({
15
- el: "#seminar-form",
16
- data: {
17
- isSeminarDisabled: false
18
- },
19
- computed: {
20
- checkSeminarStatus: function() {
21
- return // ここの処理がわからない
22
- },
23
- submitValue: function() {
24
- if (this.isSeminarDisabled) {
25
- return "受付終了しました"
26
- }
27
- return "申し込む"
28
- },
29
- },
30
- })
31
-
32
- ```
33
-
34
- 詳しい方いましたら教えてください。
35
-
36
-
37
- ## 追記
38
- 応動くという意味ではできたですが、これで良いのかご指導いだけると助かります。
1
+ 部不具合を含だコードや誤った記述あったため質問を削除しまし。再度調べ直して投稿します。
39
-
40
- ```HTML
41
- <div class="inquiry-form-inner <%= disabled_class("disabled") %>" ref="inquiryFormInner">
42
- ```
43
-
44
- ```Vue
45
- data: {
46
- isSeminarDisabled: false
47
- },
48
- mounted: function() {
49
- const isSeminarDisabled = this.$refs.inquiryFormInner.classList.contains('disabled');
50
- if(isSeminarDisabled) {
51
- this.isSeminarDisabled = true
52
- }
53
- },
54
- computed: {
55
- submitValue: function() {
56
- if (this.isSeminarDisabled) {
57
- return "受付終了しました"
58
- }
59
- return "申し込む"
60
- },
61
- },
62
- ```

1

修正

2020/11/04 02:12

投稿

MH00214
MH00214

スコア53

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  下記のようにコードを書いているのですが、checkSeminarStatusの中でDOMを取得してきて、disabledというClassがある場合はisSeminarDisabledをtrueにしてテキストを変えたいです
7
7
 
8
8
  ```HTML
9
- <input type="submit" name="submit" :value="submitValue" class="novasell-inquiry-form-submit-button">
9
+ <input type="submit" name="submit" :value="submitValue" class="inquiry-form-submit-button">
10
10
 
11
11
  ```
12
12
 
@@ -31,4 +31,32 @@
31
31
 
32
32
  ```
33
33
 
34
- 詳しい方いましたら教えてください。
34
+ 詳しい方いましたら教えてください。
35
+
36
+
37
+ ## 追記
38
+ 一応動くという意味ではできたんですが、これで良いのかご指導いただけると助かります。
39
+
40
+ ```HTML
41
+ <div class="inquiry-form-inner <%= disabled_class("disabled") %>" ref="inquiryFormInner">
42
+ ```
43
+
44
+ ```Vue
45
+ data: {
46
+ isSeminarDisabled: false
47
+ },
48
+ mounted: function() {
49
+ const isSeminarDisabled = this.$refs.inquiryFormInner.classList.contains('disabled');
50
+ if(isSeminarDisabled) {
51
+ this.isSeminarDisabled = true
52
+ }
53
+ },
54
+ computed: {
55
+ submitValue: function() {
56
+ if (this.isSeminarDisabled) {
57
+ return "受付終了しました"
58
+ }
59
+ return "申し込む"
60
+ },
61
+ },
62
+ ```