screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&display=swap" rel="stylesheet"> </head> <body> <div id="app"> <h3>Vue Js Multiple Select Chips</h3> <div class="chips"> <span v-for="(chip, index) in chips" :key="index" class="chip"> {{ chip }} <i class="material-icons" @click="removeChip(index)">close</i> </span> </div> <select v-model="newChip" @change="addChip"> <option disabled value="">Please select one</option> <option v-for="option in options" :value="option.language"> {{option.language}}</option> </select> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { chips: [], newChip: "", options: [ { id: 1, language: 'React', }, { id: 2, language: 'Vue', }, { id: 3, language: 'Angular' }, { id: 4, language: 'Node' }, { id: 5, language: 'Express' }, { id: 6, language: 'Bootstrap' }, { id: 7, language: 'MongoDb' }, ] } }, methods: { addChip() { if (this.newChip !== "" & this.chips.indexOf(this.newChip) == -1) { this.chips.push(this.newChip); this.newChip = ""; } }, removeChip(index) { this.chips.splice(index, 1); } } }); </script> <style scoped> .chips { display: flex; flex-wrap: wrap; } .chip { display: flex; align-items: center; background-color: #e0e0e0; padding: 0.4rem; border-radius: 16px; margin: 0.5rem; font-size: 1rem; font-weight: bold; } .chip i { margin-left: 0.5rem; cursor: pointer; font-size: 1rem; background-color: black; color: #fff; border-radius: 50%; } </style> </body> </html>