javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(vue): update component usage examples for vue 3 (#22050)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-11 13:48:21 -04:00
committed by GitHub
parent 74af3cb50b
commit db2cac20fb
118 changed files with 2647 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/toggle/readme.md
View File

@ -393,18 +393,18 @@ export class ToggleExample {
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="pepperoni"
:checked="toppings.indexOf('pepperoni') !== -1">
:checked="toppings.value.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="sausage"
:checked="toppings.indexOf('pepperoni') !== -1"
:checked="toppings.value.indexOf('pepperoni') !== -1"
disabled="true">
</ion-toggle>
</ion-item>
@ -412,13 +412,27 @@ export class ToggleExample {
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="mushrooms"
:checked="toppings.indexOf('pepperoni') !== -1">
:checked="toppings.value.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item>
</ion-list>
</template>
<script>
import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
import { defineComponent, vue } from 'vue';
export default defineComponent({
components: { IonLabel, IonList, IonItem, IonToggle },
setup() {
const toppings = ref([]);
return { toppings };
}
});
</script>
```

26
core/src/components/toggle/usage/vue.md
View File

@ -21,18 +21,18 @@
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="pepperoni"
:checked="toppings.indexOf('pepperoni') !== -1">
:checked="toppings.value.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="sausage"
:checked="toppings.indexOf('pepperoni') !== -1"
:checked="toppings.value.indexOf('pepperoni') !== -1"
disabled="true">
</ion-toggle>
</ion-item>
@ -40,11 +40,25 @@
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle
@ionChange="toppings.push($event.target.value)"
@ionChange="toppings.value.push($event.target.value)"
value="mushrooms"
:checked="toppings.indexOf('pepperoni') !== -1">
:checked="toppings.value.indexOf('pepperoni') !== -1">
</ion-toggle>
</ion-item>
</ion-list>
</template>
<script>
import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
import { defineComponent, vue } from 'vue';
export default defineComponent({
components: { IonLabel, IonList, IonItem, IonToggle },
setup() {
const toppings = ref([]);
return { toppings };
}
});
</script>
```