To implement a switch element in the application, we add the component vs-switch
on
or off
. You can also join the text with the icons.\n We can add a representative icon inside our switch with the property vs-icon
.
If you only need to add the icon in one of the states you can do it with the property vs-icon-on
or vs-icon-off
vs-value
property inside the switch component. That is the value that will be added to the array.\n {{ switchArray }}
\n\n \n<template>\n <ul class="con-s">\n <li class="modelx">\n {{ \"\\{\\{ switchArray \\}\\}\" }}\n </li>\n <li>\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="luis">\n <span slot="off">Luis</span>\n </vs-switch>\n </li>\n <li>\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="carols">\n <span slot="off">Carols</span>\n </vs-switch>\n </li>\n <li>\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="summer">\n <span slot="off">Summer</span>\n </vs-switch>\n </li>\n <li>\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="lyon">\n <span slot="off">Lyon</span>\n </vs-switch>\n </li>\n </ul>\n</template>\n\n<script>\nexport default {\n data(){\n return {\n switchArray:['luis'],\n }\n }\n}\n</script>\n \n