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

質問編集履歴

2

誤記の修正

2020/07/29 03:12

投稿

takashun
takashun

スコア1

title CHANGED
File without changes
body CHANGED
@@ -95,15 +95,15 @@
95
95
 
96
96
  <p><select v-model="opelist" v-on:change="changeList">
97
97
  <option value="0" selected>--リストを選択--</option>
98
- <option v-for="n in 10" v-bind:value="n">リスト{{n}}</option>
98
+ <option v-for="n in 5" v-bind:value="n">リスト{{n}}</option>
99
99
  </select>
100
100
 
101
101
  <label>===リストの表示===</label>
102
102
  <p><select v-model="opelist" v-on:change="changeList">
103
103
  <option value="0" selected>--リストを選択--</option>
104
- <option v-for="n in 10" v-bind:value="n">リスト{{n}}</option>
104
+ <option v-for="n in 5" v-bind:value="n">リスト{{n}}</option>
105
105
  </select></p>
106
- <ul v-for="n in 10" v-bind:value="n">リスト{{n}}
106
+ <ul v-for="n in 5" v-bind:value="n">リスト{{n}}
107
107
  <div v-if="hasRight && selectBoxValue > 1">
108
108
  <label class="switch__label">
109
109
  <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" v-on:change="changeToggle(n-1)" />

1

テンプレート全体部分を記載

2020/07/29 03:12

投稿

takashun
takashun

スコア1

title CHANGED
File without changes
body CHANGED
@@ -56,25 +56,71 @@
56
56
  リスト5 トグルスイッチOFF
57
57
  ```
58
58
 
59
- ###私が実装しているグル処理の箇所
59
+ ###追記:テンプレー全体部分
60
- こちらのまま実行すると、現在の実行結果になります。
61
60
  ```
61
+ <div class="contents" v-else-if="isActive === '4'">
62
+ <p>
63
+ <select v-model="selectBoxValue" v-on:change="changeAlertList" class="round">
64
+ <option v-for="(label,id) in selectBoxOptions" :value="id">{{ label }}</option>
65
+ </select>
66
+ </p>
67
+ <div v-if="isLoading">
62
- <ul v-for="n in 5" v-bind:value="n">リスト{{n}}
68
+ <img src="img/load.gif" />
69
+ </div>
70
+
71
+ <label>===一括ON/OFF===</label>
72
+
73
+ <div v-if="!isLoading">
74
+ <p v-if="isToggled==true && selectBoxValue > 1" class="error">
75
+ トグルON:失敗
76
+ </p>
77
+ <p v-if="isToggled==false && selectBoxValue > 1" class="msg">
78
+ トグルOFF:成功
79
+ </p>
63
- <div v-if="hasRight && selectBoxValue > 1">
80
+ <div v-if="hasRight && selectBoxValue > 1">
81
+ <label class="switch__label">
82
+ <input type="checkbox" class="switch__input" v-model="isToggled" v-on:change="changeToggle" />
83
+ <span class="switch__content"></span>
84
+ <span class="switch__circle"></span>
85
+ </label>
86
+ </div>
87
+ <div v-if="!hasRight && selectBoxValue > 1">
88
+ <label class="switch__label">
89
+ <input type="checkbox" class="switch__input" v-model="isToggled" disabled />
90
+ <span class="switch__content"></span>
91
+ <span class="switch__circle"></span>
92
+ </label>
93
+ <p class="error">※メッセージ</p>
94
+ </div>
95
+
96
+ <p><select v-model="opelist" v-on:change="changeList">
97
+ <option value="0" selected>--リストを選択--</option>
98
+ <option v-for="n in 10" v-bind:value="n">リスト{{n}}</option>
99
+ </select>
100
+
101
+ <label>===リストの表示===</label>
102
+ <p><select v-model="opelist" v-on:change="changeList">
103
+ <option value="0" selected>--リストを選択--</option>
104
+ <option v-for="n in 10" v-bind:value="n">リスト{{n}}</option>
105
+ </select></p>
106
+ <ul v-for="n in 10" v-bind:value="n">リスト{{n}}
107
+ <div v-if="hasRight && selectBoxValue > 1">
64
108
  <label class="switch__label">
65
- <input type="checkbox" class="switch__input" v-model="isToggle" v-on:change="changeToggle" />
109
+ <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" v-on:change="changeToggle(n-1)" />
66
110
  <span class="switch__content"></span>
67
111
  <span class="switch__circle"></span>
68
112
  </label>
69
113
  </div>
70
114
  <div v-if="!hasRight && selectBoxValue > 1">
71
115
  <label class="switch__label">
72
- <input type="checkbox" class="switch__input" v-model="isToggle" disabled />
116
+ <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" disabled />
73
117
  <span class="switch__content"></span>
74
118
  <span class="switch__circle"></span>
75
119
  </label>
76
120
  </div>
77
- </ul>
121
+ </ul>
122
+ </div>
123
+ </div>
78
124
 
79
125
  ```
80
126