Heim > Web-Frontend > uni-app > Hauptteil

So ändern Sie den Status des ausgewählten Kontrollkästchens in Uniapp

藏色散人
Freigeben: 2023-01-13 00:44:38
Original
11003 Leute haben es durchsucht

So ändern Sie den Status des ausgewählten Kontrollkästchens in uniapp: Öffnen Sie zuerst die entsprechende Codedatei und ändern Sie dann den ausgewählten Status, indem Sie den Code „if(e.detail.value.length>0){self.limitArea=1...“ hinzufügen. }" Dürfen.

So ändern Sie den Status des ausgewählten Kontrollkästchens in Uniapp

Die Betriebsumgebung dieses Artikels: Windows7-System, Uni-App2.5.1-Version, DELL G3-Computer.

So zeichnen Sie ein Uniapp-Kontrollkästchen auf und ändern dynamisch den Prüfstatus

Szenario: Wenn der Benutzer im deaktivierten Zustand auf das Kontrollkästchen klickt, werden Bestätigung und Abbruch angezeigt. Klicken Sie auf „OK“, um es standardmäßig zu aktivieren Abbrechen, um zum deaktivierten Zustand zurückzukehren.

Normalerweise geschieht dies wie folgt:

<checkbox-group @change="checkboxChange" name="limitarea" >
<label>
<checkbox value="1" :checked="limitArea"/>
<text>限定地区</text>
</label>
</checkbox-group>
<script>
export default {
data() {
return {
limitArea:0
}
},
methods: {
checkboxChange: function(e){
var self = this;
if( e.detail.value.length > 0 ){
uni.showModal({
title: &#39;限定地区&#39;,
content: &#39;限定地区,可能需要等待较长时间&#39;,
confirmText: "确定",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
self.limitArea = 1;
}else{
self.limitArea = 0;
}
}
});
}else{
this.limitArea = 0;
}
}
},
components: {}
}
</script>
Nach dem Login kopieren

:checked="limitArea" oben ist der Anzeigestatus an limitArea gebunden. Ich habe jedoch festgestellt, dass sich der limitArea-Wert auf 0 geändert hat, obwohl ich auf „Abbrechen“ geklickt habe. Logischerweise sollte das Kontrollkästchen deaktiviert sein, aber der angezeigte aktivierte Status ist immer noch aktiviert. Ich verstehe den Grund nicht. Lösung:

checkboxChange: function(e){
var self = this;
if( e.detail.value.length > 0 ){//点击勾选
self.limitArea = 1;  // *****加上这句代码*******
uni.showModal({
title: &#39;限定地区&#39;,
content: &#39;限定地区,可能需要等待较长时间&#39;,
confirmText: "确定",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
self.limitArea = 1;
}else{
self.limitArea = 0;
}
}
});
}else{
this.limitArea = 0;
}
}
Nach dem Login kopieren

Szenario 2:

Zum Überprüfen klicken, aber wir möchten es nicht überprüfen und erzwingen, dass es in den nicht überprüften Zustand zurückkehrt. Eine direkte Änderung des limitArea-Werts wird nicht wirksam. Die Lösung lautet: Es erscheint eine Eingabeaufforderung. Klicken Sie auf „OK“ und ändern Sie dann den Wert in „OK“. Sie müssen jedoch weiterhin auf das Problem des ersten Szenarios achten.

Empfohlen: „uniapp-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Status des ausgewählten Kontrollkästchens in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage