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.\r\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.\r\n {{ switchArray }}
\r\n \r\n \r\n<template>\r\n <ul class="con-s">\r\n <li class="modelx">\r\n {{ \"\\{\\{ switchArray \\}\\}\" }}\r\n </li>\r\n <li>\r\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="luis">\r\n <span slot="off">Luis</span>\r\n </vs-switch>\r\n </li>\r\n <li>\r\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="carols">\r\n <span slot="off">Carols</span>\r\n </vs-switch>\r\n </li>\r\n <li>\r\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="summer">\r\n <span slot="off">Summer</span>\r\n </vs-switch>\r\n </li>\r\n <li>\r\n <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="lyon">\r\n <span slot="off">Lyon</span>\r\n </vs-switch>\r\n </li>\r\n </ul>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data(){\r\n return {\r\n switchArray:['luis'],\r\n }\r\n }\r\n}\r\n</script>\r\n \r\n