Q&A
Vueインスタンスの実装部分のコードも提示ください。
つまり、isToggle、hasRight、selectBoxValueなどのプロパティや、changeToggleファンクションなどリスト表示とトグル処理に関連するコードが必要です。
前提・実現したいこと
今のプロジェクトでvue.jsを使ってリストの１～５までを表示する画面の修正をしています。
ここで画面(main.html)にトグルを実装したいと思っています。
また、条件としては、修正範囲がmain.htmlのみとなっており、
main.jsに関しては既にロジックは実装済みであるため、修正しない方針で現状はやっております。
そこでhtml側の処理だけで修正できないか検討してるのですが、
まだ方法が見つけられていない状況です。
質問
<ui v-for="n in 5" v-bind:value="n"> リスト{{n}}
を用いて、トグルを実装する方法をご教授いただけないでしょうか？
画面のイメージとしては、
リスト1 トグルスイッチON リスト2 トグルスイッチOFF リスト3 トグルスイッチOFF リスト4 トグルスイッチON リスト5 トグルスイッチON
のようなリストに対してトグルのON/OFFを設定できる画面をつくっています。
ここで
<ui v-for="n in 5" v-bind:value="n"> リスト{{n}}
の実装した後にトグルの処理を入れればfor分の処理のように実装できると思ったのですが、
入れたトグルの処理がすべてのリストに連動してしまって困っています。
そのため、１つのトグルをONにするとすべてON、１つのトグルをOFFにするとすべてOFFになってしまいます。
私の期待値として以下のようにリスト毎に設定したいです。
#[期待値]
リスト1 トグルスイッチON リスト2 トグルスイッチOFF リスト3 トグルスイッチOFF リスト4 トグルスイッチON リスト5 トグルスイッチON
#[現在の実行結果]
リスト1 トグルスイッチON リスト2 トグルスイッチON リスト3 トグルスイッチON リスト4 トグルスイッチON リスト5 トグルスイッチON または、 リスト1 トグルスイッチOFF リスト2 トグルスイッチOFF リスト3 トグルスイッチOFF リスト4 トグルスイッチOFF リスト5 トグルスイッチOFF
###追記:テンプレート全体部分
<div class="contents" v-else-if="isActive === '4'"> <p> <select v-model="selectBoxValue" v-on:change="changeAlertList" class="round"> <option v-for="(label,id) in selectBoxOptions" :value="id">{{ label }}</option> </select> </p> <div v-if="isLoading"> <img src="img/load.gif" /> </div> <label>===一括ON/OFF===</label> <div v-if="!isLoading"> <p v-if="isToggled==true && selectBoxValue > 1" class="error"> トグルON：失敗 </p> <p v-if="isToggled==false && selectBoxValue > 1" class="msg"> トグルOFF：成功 </p> <div v-if="hasRight && selectBoxValue > 1"> <label class="switch__label"> <input type="checkbox" class="switch__input" v-model="isToggled" v-on:change="changeToggle" /> <span class="switch__content"></span> <span class="switch__circle"></span> </label> </div> <div v-if="!hasRight && selectBoxValue > 1"> <label class="switch__label"> <input type="checkbox" class="switch__input" v-model="isToggled" disabled /> <span class="switch__content"></span> <span class="switch__circle"></span> </label> <p class="error">※メッセージ</p> </div> <p><select v-model="opelist" v-on:change="changeList"> <option value="0" selected>--リストを選択--</option> <option v-for="n in 5" v-bind:value="n">リスト{{n}}</option> </select> <label>===リストの表示===</label> <p><select v-model="opelist" v-on:change="changeList"> <option value="0" selected>--リストを選択--</option> <option v-for="n in 5" v-bind:value="n">リスト{{n}}</option> </select></p> <ul v-for="n in 5" v-bind:value="n">リスト{{n}} <div v-if="hasRight && selectBoxValue > 1"> <label class="switch__label"> <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" v-on:change="changeToggle(n-1)" /> <span class="switch__content"></span> <span class="switch__circle"></span> </label> </div> <div v-if="!hasRight && selectBoxValue > 1"> <label class="switch__label"> <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" disabled /> <span class="switch__content"></span> <span class="switch__circle"></span> </label> </div> </ul> </div> </div>
つたない説明で申し訳ありませんが、
ご存じの方よろしくお願いいたします。
rubytomato様。
ご回答ありがとうございます。
記載できる範囲でいかに記載してみました。
引き続きご教授いただければと思います。
AWSCognito.config.region = "ap-northeast-1";
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "ap-northeast-1:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
});
function isHanEisu(str) {
str = (str == null) ? "" : str;
if (str.match(/^[A-Za-z0-9]+$/)) {
return true;
} else {
return false;
}
}
var data = {
UserPoolId: "ap-northeast-1_xxxxxxxxxxxxxxxxxxxx",
ClientId: "yyyyyyyyyyyyyyyyyyyyyyyyyy"
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
cognitoUser = userPool.getCurrentUser();
var email;
var auth;
new Vue({
el: '#app',
data: {
isActive: '1',
isToggled: false,
isLoading: false,
errormsg: '',
msg: '',
operators: {},
calls: {},
selectBoxValue: '1',
opelist: 0,
code: '',
hasRight: false,
updatedList: {},
selectBoxOptions: {
"1": "---コードを選択してください---"
}
},
mounted: function () {
this.$nextTick(function () {
this.errormsg = "";
if (cognitoUser == null) {
var url = "signin.html";
$(location).attr("href", url);
}
cognitoUser.getSession(function (err, result) {
console.log(result)
auth = result
});
cognitoUser.getUserAttributes(function (err, attrresult) {
for (i = 0; i < attrresult.length; i++) {
if (attrresult[i].getName() == "email") {
email = attrresult[i].getValue();
}
}
});
var me = this
var url = BASE_API_ENDPOINT + 'api/v1.0/lllllllllllllllllllllllll'
console.log(auth.getIdToken().getJwtToken())
$.ajax({
url: url, // 通信先URL
type: 'GET', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
})
.then(
function (data) {
console.log(data)
me.selectBoxOptions = data
},
function (data) {
console.log(data)
me.errormsg = data["responseText"]
}
)
})
},
watch: {
isActive: function () {
this.selectBoxValue = 1
this.opelist = 0
this.operators = {}
this.msg = ''
this.errormsg = ''
}
},
methods: {
changeToggle: function () {
var me = this
me.msg = ""
me.errormsg = ""
console.log(me.isToggled)
var url = BASE_API_ENDPOINT + 'api/v1.0/dddddddddddddddddddddd'
d = {
"code": me.selectBoxOptions[me.selectBoxValue],
"isToggled": me.isToggled
}
$.ajax({
url: url, // 通信先URL
type: 'POST', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
data: JSON.stringify(d)
})
.then(
function (data) {
console.log(data)
},
function (data) {
console.log(data)
me.errormsg = data["responseText"]
},
)
},
changeStatusList: function () {
this.calls = {}
this.isLoading = true;
this.errormsg = ''
this.msg = ''
me = this
var url = BASE_API_ENDPOINT + 'api/v1.0/sssssssssssssssssss'
if (me.selectBoxValue > 1) {
url += '?code=' + me.selectBoxOptions[me.selectBoxValue];
$.ajax({
url: url, // 通信先URL
type: 'GET', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
})
.then(
function(data) {
console.log(data)
me.calls = data;
for (var i = 0; i < me.calls.length; i++) {
me.calls[i]["To"] = me.calls[i]["To"].replace("%2B81", "0")
me.calls[i]["Digits"] = me.calls[i]["Digits"] == "" ? "電話に出ませんでした" : me.calls[i]["Digits"] + "番を押して応答しました"
}
console.log(me.calls)
me.isLoading = false
},function(data){
me.errormsg = data["responseText"]
me.isLoading = false
})
}
},
registercode: function () {
var me = this
me.errormsg = ""
me.code = me.code.toUpperCase()
if (me.code.length < 3) {
me.errormsg = "エラーです"
return
}
if (!isHanEisu(me.code)) {
me.errormsg = "エラーです"
return
}
var opedata = []
for (var i = 1; i <= 10; i++) {
opedata.push({
"priority": i,
"email": "",
"tel": ""
})
}
var d = {}
d["opedata"] = opedata
d["code"] = me.code
console.log(d)
var url = BASE_API_ENDPOINT + 'api/v1.0/ooooooooooooooooooooo'
$.ajax({
url: url, // 通信先URL
type: 'POST', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
data: JSON.stringify(d)
})
.then(
function (data) {
console.log(data)
me.msg = "completed"
me.selectBoxOptions = data
},
function (data) {
console.log(data)
me.errormsg = data["responseText"]
},
)
},
changeList: function () {
this.operators = '';
this.errormsg = ''
this.msg = ''
var me = this
if (me.opelist == 0 || me.selectBoxValue == 1) {
return
}
me.isLoading = true;
var url = BASE_API_ENDPOINT + 'api/v1.0/iiiiiiiiiiiiiiiiiiiiiiiii'
url += '?code=' + me.selectBoxOptions[me.selectBoxValue];
url += '&email=' + email;
url += '&opelist=' + me.opelist;
$.ajax({
url: url, // 通信先URL
type: 'GET', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
})
.then(
function (data) {
console.log(data)
me.operators = data["operators"]
me.hasRight = data["hasRight"]
me.isToggled = data["isToggled"]
me.isLoading = false
},
function (data) {
console.log(data)
me.isLoading = false
me.errormsg = data["responseText"]
}
)
},
changeAlertList: function () {
this.operators = '';
this.isLoading = true;
this.errormsg = ''
this.msg = ''
var me = this
var url = BASE_API_ENDPOINT + 'api/v1.0/ccccccccccccccccccccccccccccc'
if (this.selectBoxValue > 1) {
url += '?code=' + this.selectBoxOptions[this.selectBoxValue];
url += '&email=' + email;
$.ajax({
url: url, // 通信先URL
type: 'GET', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
})
.then(
function (data) {
console.log(data)
me.isToggled = data['isToggled'] == "0" ? false : true
me.hasRight = data["hasRight"]
me.isLoading = false
},
function (data) {
me.errormsg = data["responseText"]
me.isLoading = false
})
}
},
updateList: function () {
var me = this
me.isLoading = true
me.errormsg = ''
me.msg = ''
var endrow = false
for (var i = 0; i < me.operators.length; i++) {
if (me.operators[i].email !== "" && me.operators[i].tel !== "") {
if (!me.operators[i].tel.match(/^[0-9]+$/)) {
me.errormsg += 'エラーです\n'
me.isLoading = false
return
}
if (!me.operators[i].email.match(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/)) {
me.errormsg += 'エラーです\n'
me.isLoading = false
return
}
} else {
endrow = true
}
if (endrow && (me.operators[i].email !== "" || me.operators[i].tel !== "")) {
me.errormsg = 'エラーです。'
me.isLoading = false
return
}
}
var d = {}
d["opedata"] = me.operators
d["opelist"] = me.opelist
d["code"] = me.selectBoxOptions[me.selectBoxValue]
d["isToggled"] = me.isToggled
console.log(d)
var url = BASE_API_ENDPOINT + 'api/v1.0/kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'
$.ajax({
url: url, // 通信先URL
type: 'POST', // 使用するHTTPメソッド
dataType: 'json', // レスポンスのデータタイプ
headers: {
"Content-Type": "application/json",
"Authorization": auth.getIdToken().getJwtToken()
},
data: JSON.stringify(d)
})
.then(
function (data) {
me.msg = '更新完了'
me.isLoading = false
},
function (data) {
me.errormsg = data["responseText"]
me.isLoading = false
})
}
}
});
回答3件
0
ベストアンサー
アプリケーションの仕様が不明なので正確な回答は難しいのですが、どのように修正すれば対応できるかイメージできるコードで回答致します。
現在のコードでは5つのチェックボックスがすべて連動してしまうということですが、これはisToggledプロパティですべてのチェックボックスを管理しているためです。
5つのチェックボックスの状態(ON/OFF)を別々に管理するには、それぞれを別々のプロパティで管理する必要があります。
↓ 現状
vue
1data() { 2 return { 3 isToggled: false, 4 hasRight: false 5 } 6}
↓ この例では配列で管理するように修正しました。
また、hasRightプロパティの役割が何なのか分からないのですが、これも個々のチェックボックスの状態を表しているのであれば、同様に修正します。（以下、その前提でコードを提示します）
vue
1data() { 2 return { 3 isToggled: [false, false, false, false, false], 4 hasRight: [false, false, false, false, false] 5 } 6}
次にtemplateの部分ですが
html
1<ul v-for="n in 5" v-bind:value="n">リスト{{n}} 2 3 <input type="checkbox" class="switch__input" v-model="isToggled" v-on:change="changeToggle" /> 4 5</ul>
isToggled配列の各要素をv-modelに指定するには下記のように記述します。また、操作されたチェックボックスが何番目かを伝えるためにchangeToggleファンクションに引数を追加します。
html
1<ul v-for="n in 5" v-bind:value="n">リスト{{n}} 2 3 <input type="checkbox" class="switch__input" v-model="isToggled[n-1]" v-on:change="changeToggle(n-1)" /> 4 5</ul>
たとえば、changeToggleの下記の部分などは
javascript
1changeToggle: function() { 2 3 // 省略 4 5 var d = { 6 code: me.selectBoxOptions[me.selectBoxValue], 7 isToggled: me.isToggled 8 } 9 10 // 省略 11 12}
↓ このように修正する必要があると思います。
javascript
1changeToggle: function(n) { 2 3 // 省略 4 5 var d = { 6 code: me.selectBoxOptions[me.selectBoxValue], 7 isToggled: me.isToggled[n] 8 } 9 10 // 省略 11 12}
ほかにもｘ番目のチェックボックスの操作で実行するファンクションがあれば、同様の修正が必要かとおもいます。
投稿2020/07/28 12:19
総合スコア1752
rubytomato様
私にも理解できるレベルで記載していただきまして本当にありがとうございます。
こちらの「どのように修正すれば対応できるかイメージできるコード」を参考にして修正してみます！
この件で今の私の理解としては、v-forで配列を取り、index.lengthまで回して、その中で、flagを持たせて、
flag=1ならON、flag=0ならOFFのように状態を管理させらるのではないかと思っていました。
いずれにしても、rubytomato様のやり方を参考にしてやってみます！
> この件で今の私の理解としては、v-forで配列を取り、index.lengthまで回して、その中で、flagを持たせて、
> flag=1ならON、flag=0ならOFFのように状態を管理させらるのではないかと思っていました。
チェックボックスの状態を管理するオブジェクトの配列を使うという意味でしょうか？
であれば、それでもかまわないと思います。
rubytomato様
連絡が遅くなって申し訳ありません。
自分で以下のように修正したところ、
いくつかうまく動作できていない点があったので、
template部分でトグルのON/OFFの挙動について
質問させてください。
# 困っている点1:
現状のテンプレート部分において以下のコードを有効化しておかないと、
各リスト１～１０を個別にON/OFFの切り替えができなかった。
* 期待1:
以下の処理を記載しなくても各リスト１～１０を個別にON/OFFの切り替えができるようにしたい。
```
<p><select v-model="opelist" v-on:change="changeList">
<option value="0" selected>--リストを選択--</option>
<option v-for="n in 5" v-bind:value="n">リスト{{n}}</option>
</select></p>
```
## template
```
<p><select v-model="opelist" v-on:change="changeList">
<option value="0" selected>--リストを選択--</option>
<option v-for="n in 5" v-bind:value="n">リスト{{n}}</option>
</select></p>
<ul v-for="n in 5" v-bind:value="n">リスト{{n}}
<div v-if="hasRight && selectBoxValue > 1">
<label class="switch__label">
<input type="checkbox" class="switch__input" v-model="isToggled[n-1]" v-on:change="changeToggle(n-1)" />
<span class="switch__content"></span>
<span class="switch__circle"></span>
</label>
</div>
<div v-if="!hasRight && selectBoxValue > 1">
<label class="switch__label">
<input type="checkbox" class="switch__input" v-model="isToggled[n-1]" disabled />
<span class="switch__content"></span>
<span class="switch__circle"></span>
</label>
</div>
</ul>
```
# 困っている点2:
一括でON/OFFできない。各リスト個別のON/OFFを
## 現状
一括ON/OFFは上記のコードの場合、リスト１のみに一回だけ適応され、二回目以降は適応されない。
※[n-1]だとリスト1がON、[n-2]だとリスト2がONで、一回目だけ、一番上にある
* 期待2:
以下の処理を記載しなくても各リスト個別にON/OFFの切り替えができるようにしたい。
# 困っている点3:
画面構成において、「===リスト表示===」の下にあるBOXを表示させたくない。
※表示させないと「各リスト１～１０を個別にON/OFFの切り替え」ができないから今はしている状態。
* 期待3:
「===リスト表示===」の下にあるBOXを表示させない。
## 現在の画面
```
-----------------
|xxxxxxxxxx |
-----------------
===一括ON/OFF===
一括ON/OFFトグルボタン
===リストの表示===
-----------------
|リスト1 |
-----------------
リスト1
ON/OFFトグルボタン
リスト2
ON/OFFトグルボタン
・
・
・
リスト5
ON/OFFトグルボタン
```
## 目指したい画面
```
-----------------
|xxxxxxxxxx |
-----------------
===一括ON/OFF===
一括ON/OFFトグルボタン
===リストの表示===
リスト1
ON/OFFトグルボタン
リスト2
ON/OFFトグルボタン
・
・
・
リスト5
ON/OFFトグルボタン
```
> # 困っている点2:
> 一括でON/OFFできない。各リスト個別のON/OFFを
> ## 現状
> 一括ON/OFFは上記のコードの場合、リスト１のみに一回だけ適応され、二回目以降は適応されない。
> ※[n-1]だとリスト1がON、[n-2]だとリスト2がONで、一回目だけ、一番上にある
チェックボックスを個別に管理するプロパティと一括ON/OFFを管理するプロパティが同じだからではないでしょうか？
一括ON/OFFを管理するプロパティを新しく追加してみてください。
```
<input type="checkbox" class="switch__input" v-model="isToggled" v-on:change="changeToggle" />
```
↓例えばこのように
```
<input type="checkbox" class="switch__input" v-model="isAllToggled" v-on:change="changeAllToggle" />
```
changeAllToggleは新しく実装するファンクションですが、やることは配列で管理しているisToggledプロパティをすべてtrue/falseに更新する処理になると思います。
> # 困っている点1:
> 現状のテンプレート部分において以下のコードを有効化しておかないと、
> 各リスト１～１０を個別にON/OFFの切り替えができなかった
> # 困っている点3:
> 画面構成において、「===リスト表示===」の下にあるBOXを表示させたくない。
> ※表示させないと「各リスト１～１０を個別にON/OFFの切り替え」ができないから今はしている状態。
困っている点1,3は同じことを指していますか?
こちらの原因はよくわかりませんがコンソールにエラーが出ていないか確認してください。
もしかすると質問に掲示されていない部分のコードが影響しているかもしれません。
いくつかアドバイスさせて頂きます。
・chromeであればvue-devtoolsという拡張機能を入れてデバッグしてみてください。
・エディタにVSCodeをお使いであればeslintとeslint-plugin-vue、Veturプラグインなどを導入してみてください。静的解析でバグが見つかるかもしれません。
・もう少し詳しく調べるには、現在の動作が再現可能な最小のコードセットをご提示いただくことです。
トグルの部分でお困りだと思いますので、現状のトグルの動作確認ができるコード（テンプレートとスクリプト）を質問欄にアップデートしてください。
・APIコールの部分は記載されていても第3者は実行できないので省略して頂いて、成功レスポンスが返ってきたという見なしコードに置き換えて頂くと助かります。
たとえばmountedでは
me.selectBoxOptions = data
という処理を行っていますが、どのようなデータがselectBoxOptionsにセットされるのか不明です。
値はダミーで結構ですので、どのような構造のオブジェクトがセットされるのか置き換えてください。
例えば、↓このようなイメージのコードで置き換えられていると理解しやすいです。
me.selectBoxOptions = [{id:1, name:'aaa'}, {id:2, name:'bbb'}, {id:3, name:'ccc'}]
rubytomato様
アドバイスありがとうございます！
>チェックボックスを個別に管理するプロパティと一括ON/OFFを管理するプロパティが同じだからではないでしょうか？
>一括ON/OFFを管理するプロパティを新しく追加してみてください。
個別に管理するプロパティと一括に管理するプロパティを分けることをしてませんでした。
まずはこちらを追加してみて全体で動作できているかを確認してみます。
>困っている点1,3は同じことを指していますか?
>こちらの原因はよくわかりませんがコンソールにエラーが出ていないか確認してください。
>もしかすると質問に掲示されていない部分のコードが影響しているかもしれません。
こちらもまずはエラーがでていないか確認してみようと思います。
上記のアドバイスもありがとうございます。
社内ルールでいくつか会社支給環境ではできないものあるため、
何ができるかやってみて１ずつ確認してみます。
0
rubytomato様
お世話になっております。やっと画面が期待通りに動きました！
ありがとうございます！
実際の画面処理のところは、
<tr v-for="n in 5" v-bind:value="n"> <td>リスト{{n}}</td> <td> <input type="checkbox" class="switch__input" v-model="isAllToggled" v-on:change="changeAllToggle" /> </td> . . .
という具合にしたことで実現できました。
今回の件で、
rubytomato様の説明を理解するために
tagの使い方と各処理のスコープについて
何を自分でわかっていなければわからないのかも確認できたので前以上に理解できました。
本当にありがとうございました！
投稿2020/07/30 12:09
総合スコア1
解決できたとのことで良かったです。これからも頑張ってください。
0
5つの要素に対してisToggle1つで状態を管理しているので全部trueかfalseの2パターンになってしまうのだと思います。
解決策の1つとしてisToggleをBoolean5つ格納された配列にし、その中身ををv-modelに参照させたらどうでしょうか。
投稿2020/07/27 23:39
編集2020/07/27 23:40
総合スコア31
oouu様。
こちらの言っていることは理解できたのですが、
今の自分の理解では具体的にこれをどう実現すればいいのかわかっておりません。
大変申し訳ないのですが、ご教授いただけないでしょうか？
あなたの回答
tips
プレビュー
