What do we need?
A Vue project with SassCSS (I'm using my last project and modified it to use it in this example).
A SCSS base styles, also I added in the repo in assets folder
Step 1
In a ToggleButton.vue file we will create our button
<template>
<label
:for="'button-'+id"
:class="{ active: isActive }"
class="toggle__button"
@change="OnChange"
>
<span v-if="isActive" class="toggle__label">{{ enableText }}</span>
<span v-if="!isActive" class="toggle__label">{{ disabledText }}</span>
<input
type="checkbox"
:disabled="disabled"
:id="'button-'+id"
v-model="checkedValue"
/>
<span class="toggle__switch"></span>
</label>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
},
labelEnableText: {
type: String,
default: "On"
},
labelDisableText: {
type: String,
default: "Off"
},
id: {
type: String,
default: "primary"
},
defaultState: {
type: Boolean,
default: false
},
item: Object
},
data() {
return {
currentState: this.defaultState
};
},
watch: {
defaultState: function defaultState() {
this.currentState = Boolean(this.defaultState);
}
},
methods: {
OnChange() {
this.$emit("OnChange");
}
},
computed: {
isActive() {
return this.currentState;
},
enableText() {
return this.labelEnableText;
},
disabledText() {
return this.labelDisableText;
},
checkedValue: {
get() {
return this.currentState;
},
set(newValue) {
this.currentState = newValue;
this.$emit("change", newValue);
},
},
}
};
</script>
Step 2
In a CardItem.vue file we will create a card component
<template>
<div class="carditem">
<div class="carditem__image">
<img :src="pathBase+'futurama'+character.id+'.jpg'" />
</div>
<div class="carditem__info">
<strong class="carditem__title">{{ character.name.first }} {{ character.name.last }}</strong>
<span>{{ character.occupation }}</span>
<span>{{ character.species }}</span>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "CardItem",
props: {
character: {
type: Object,
},
index: Number,
showPage: {
type: Boolean,
default: false,
},
},
data() {
return {
pathBase: "https://res.cloudinary.com/lariicsa/image/upload/v1602727260/futurama/",
charImages: [
{ name: "Philip", url: "" },
{ name: "Turanga", url: "" },
{ name: "Bender", url: "futurama4_pxj04y.jpg" },
{ name: "Hubert", url: "" },
{ name: "Amy", url: "" },
{ name: "Hermes", url: "" },
{ name: "Carol", url: "" },
{ name: "John", url: "" },
{ name: "Zapp", url: "" },
{ name: "Scruffy", url: "" },
{ name: "Cubert", url: "" },
{ name: "Kif", url: "" },
{ name: "Dwight", url: "" },
{ name: "LaBarbara", url: "" },
],
};
},
mounted() {
this.index;
},
};
</script>
Step 3
In App.vue file, our main view, we will integrate our components
<template>
<div id="app" class="space">
<div class="container">
<div class="row center">
<h1>Futurama</h1>
</div>
<div class="row center">
<div class="row between">
<CardItem
v-for="(character, index) in characters"
:character="character"
:key="index"
:index="index"
>
<ToggleButton
:item="character"
:defaultState="false"
:id="index.toString()"
@OnChange="AddTofavs()"
/>
</CardItem>
</div>
</div>
</div>
</div>
</template>
<script>
import store from "@/fakeStore/characters";
import CardItem from "@/components/CardItem";
import ToggleButton from "@/components/ToggleButton";
export default {
name: "App",
components: {
CardItem,
ToggleButton
},
data() {
return {
characters: store.characters
};
},
methods: {
AddTofavs() {
this.$emit("AddTofavs")
}
}
};
</script>
We are using Watch Vue property to listen the checkbox state.
Also we can use this component with store actions.
Here you can check the Demo Link
Happy wapi Coding! :D
Top comments (0)