質問編集履歴
3
コード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,30 +3,30 @@
|
|
|
3
3
|
Composition APIに書き換えるにあたって、なぜ表示が切り替わらなくなったのかが分かりません。。。
|
|
4
4
|
|
|
5
5
|
```Vue.js
|
|
6
|
-
///Composition API///
|
|
7
6
|
<template>
|
|
8
7
|
<button @click="active()">ボタン</button>
|
|
9
8
|
<div v-if="isActive" class="hidden"></div>
|
|
10
9
|
<div v-else class="text-red-500">未入力の項目があります。</div>
|
|
11
10
|
</template>
|
|
12
|
-
|
|
11
|
+
|
|
13
12
|
<script>
|
|
14
13
|
export default {
|
|
15
|
-
setup() {
|
|
14
|
+
setup() {
|
|
16
15
|
let isActive;
|
|
17
16
|
let active = () => {
|
|
18
|
-
if(条件式)
|
|
17
|
+
if (条件式) {
|
|
19
|
-
isActive = false;
|
|
18
|
+
isActive = false;
|
|
20
|
-
console.log(
|
|
19
|
+
console.log("No title"); //ここはコンソールから出力させる。
|
|
21
|
-
|
|
20
|
+
} else {
|
|
22
|
-
console.log(
|
|
21
|
+
console.log("OK"); //ここはコンソールから出力させる。
|
|
23
22
|
}
|
|
24
|
-
};
|
|
23
|
+
};
|
|
25
|
-
return {
|
|
24
|
+
return {
|
|
26
25
|
isActive: true,
|
|
27
26
|
active,
|
|
28
|
-
};
|
|
27
|
+
};
|
|
29
|
-
}
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
30
|
</script>
|
|
31
31
|
```
|
|
32
32
|
if(条件式)の結果で、 console.log('No title')、else以降の console.log('OK');は出力されるのですが、v-if v-else の切り替えが行われません。。。
|
2
テキスト修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -11,16 +11,15 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script>
|
|
14
|
-
import { ref, isActive } from "vue";
|
|
15
14
|
export default {
|
|
16
15
|
setup() {
|
|
17
|
-
let isActive
|
|
16
|
+
let isActive;
|
|
18
17
|
let active = () => {
|
|
19
18
|
if(条件式) {
|
|
20
19
|
isActive = false;
|
|
21
|
-
console.log('No title')
|
|
20
|
+
console.log('No title') //ここはコンソールから出力させる。
|
|
22
21
|
} else {
|
|
23
|
-
console.log('OK');
|
|
22
|
+
console.log('OK'); //ここはコンソールから出力させる。
|
|
24
23
|
}
|
|
25
24
|
};
|
|
26
25
|
return {
|
1
説明追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -30,5 +30,6 @@
|
|
|
30
30
|
}
|
|
31
31
|
</script>
|
|
32
32
|
```
|
|
33
|
+
if(条件式)の結果で、 console.log('No title')、else以降の console.log('OK');は出力されるのですが、v-if v-else の切り替えが行われません。。。
|
|
33
34
|
|
|
34
35
|
return {isActive: false} とすると表示は切り替わるのですが、<button>のクリックでは表示を切り替える事ができません。
|