so as part of my vue app, I have a selection of images as checkboxes. When the image is clicked, it displays the value of that image. For example, the selections of images indicate benefits with certain companies, so when the hospital icon is clicked, it displays 'Health Insurance'. However, I would like it to also print out the corresponding hospital icon. How do I do this? The code is as follows:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<el-form-item :required="true" :error="retrieveFieldError('Benefits')">
<span></span>
</el-form-item>`
<div class="bg-white p-4 rounded w-1/3">
<ul>
<li><input type="checkbox" id=cb1 value="Health Insurance" v-model="checkedBenefits" />
<label for="cb1"><img src="https://pngimage.net/wp-content/uploads/2018/06/health-insurance-icon-png-8.png" /></label>
<p>Health Insurance</p>
</li>
<li><input type="checkbox" id="cb2" value="Vacation/Paid Annual Leave" v-model="checkedBenefits" />
<label for="cb2"><img src="http://www.myiconfinder.com/uploads/iconsets/256-256-3cea34f4f64da133115b80638b96a2be.png" /></label>
<p>Paid Leave/Vacation Time</p>
</li>
<li><input type="checkbox" id="cb3" value="Performance Bonus" v-model="checkedBenefits" />
<label for="cb3"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/bonus-1-477755.png" /></label>
<p>Performance Bonus</p>
</li>
<li><input type="checkbox" id="cb4" value="Paid Sick Days" v-model="checkedBenefits" />
<label for="cb4"><img src="https://www.optimarecruitment.co.uk/wp-content/uploads/2017/02/Sick-Day.png" /></label>
<p>Paid Sick Days</p>
</li>
<li><input type="checkbox" id="cb5" value="Pension Scheme" v-model="checkedBenefits" />
<label for="cb5"><img src="https://image.flaticon.com/icons/png/512/1117/1117871.png" /></label>
<p>Pension Plan</p>
</li>
<li><input type="checkbox" id="cb6" value="Flexible Working Schedule" v-model="checkedBenefits" />
<label for="cb6"><img src="https://www.pngkit.com/png/full/275-2758258_pink-pink-clock-clip-art-flexible-working-hours.png" /></label>
<p>Flexi-Hours</p>
</li>
<li><input type="checkbox" id="cb7" value="Fun Office Perks" v-model="checkedBenefits" />
<label for="cb7"><img src="https://cdn3.iconfinder.com/data/icons/video-game-11/112/24-video-game_gamer-male-african-american-1-512.png" /></label>
<p>Fun Office</p>
</li>
<li><input type="checkbox" id="cb8" value="Employment Development Programs" v-model="checkedBenefits" />
<label for="cb8"><img src="https://www.freeiconspng.com/uploads/operations-training-icon-8.png" /></label>
<p>Development Programs</p>
</li>
<li><input type="checkbox" id="cb9" value="Tuition Reimbursement for Related Courses" v-model="checkedBenefits" />
<label for="cb9"><img src="https://image.flaticon.com/icons/png/512/1702/1702608.png" /></label>
<p>Tuition Reimbursement</p>
</li>
<li><input type="checkbox" id="cb10" value="Employee Discount" v-model="checkedBenefits" />
<label for="cb10"><img src="https://image.flaticon.com/icons/png/512/621/621535.png" /></label>
<p>Employee Discount</p>
</li>
<li><input type="checkbox" id="cb11" value="Free Gym Membership and/or Wellness Programs" v-model="checkedBenefits" />
<label for="cb11"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/gym-member-4-1147870.png" /></label>
<p>Gym Membership</p>
</li>
<li><input type="checkbox" id="cb12" value="Stock Options and/or Equity" v-model="checkedBenefits" />
<label for="cb12"><img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/equity-1750610-1488657.png" /></label>
<p>Stock Options</p>
</li>
<li><input type="checkbox" id="cb13" value="A Diversity Program" v-model="checkedBenefits" />
<label for="cb13"><img src="https://cdn3.iconfinder.com/data/icons/life-concepts-lifestyles/128/safe-space-people-color-512.png" /></label>
<p>Diversity Program</p>
</li>
<li><input type="checkbox" id="cb14" value="Opportunity to Travel" v-model="checkedBenefits" />
<label for="cb14"><img src="https://cdn4.iconfinder.com/data/icons/aviation-cobalt/512/travel_globe_airplane_plane_international_flight_world_transportation-512.png" /></label>
<p>Opportunity to Travel</p>
</li>
<li><input type="checkbox" id="cb15" value="Remote Working" v-model="checkedBenefits" />
<label for="cb15"><img src="https://www.learngeek.co/wp-content/uploads/2016/01/ICON-WFH.png" /></label>
<p>Remote Working</p>
</li>
<li><input type="checkbox" id="cb16" value="Sabbatical Leave" v-model="checkedBenefits" />
<label for="cb16"><img src="https://womanofscience.files.wordpress.com/2015/11/sabbatical-1.png" /></label>
<p>Sabbatical Leave</p>
</li>
<li><input type="checkbox" id="cb17" value="Student Loan Repayments" v-model="checkedBenefits" />
<label for="cb17"><img src="https://hireclix.github.io/hosting/banfield/images/program-payment_icon.png" /></label>
<p>Student Loan Repayment</p>
</li>
<li><input type="checkbox" id="cb18" value="Pet-Friendly Offices" v-model="checkedBenefits" />
<label for="cb18"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/pet-friendly-1635254-1390013.png" /></label>
<p>Pet Friendly Office</p>
</li>
<li><input type="checkbox" id="cb19" value="4-Day Work Week" v-model="checkedBenefits" />
<label for="cb19"><img src="https://www.sandiego.gov/sites/default/files/police-4-day-work-weeks.png" /></label>
<p>4-Day Work Week</p>
</li>
<li><input type="checkbox" id="cb20" value="Casual Dress" v-model="checkedBenefits" />
<label for="cb20"><img src="http://www.transparentpng.com/thumb/sports-wear/form-clothes-icon-packs-png-14.png" /></label>
<p>Casual Dress</p>
</li>
<li><input type="checkbox" id="cb21" value="Free Parking" v-model="checkedBenefits" />
<label for="cb21"><img src="https://image.flaticon.com/icons/svg/1306/1306001.svg" /></label>
<p>Free on-site Parking</p>
</li>
<li><input type="checkbox" id="cb22" value="Free City Bike Pass" v-model="checkedBenefits" />
<label for="cb22"><img src="https://www.pngrepo.com/download/780/bicycle.png" /></label>
<p>City-Bike</p>
</li>
<li><input type="checkbox" id="cb23" value="Free Work Laptop" v-model="checkedBenefits" />
<label for="cb23"><img src="https://images.vexels.com/media/users/3/128132/isolated/preview/fa3b9aad78a9db81459bd03294a0f985-flat-laptop-icon-design-by-vexels.png" /></label>
<p>Free work Laptop</p>
</li>
<li><input type="checkbox" id="cb24" value="Referral Bonus" v-model="checkedBenefits" />
<label for="cb24"><img src="https://i.pinimg.com/originals/ba/11/5e/ba115e31d67474825b59d388dd31b2d2.png" /></label>
<p>Referral Bonus</p>
</li>
<li><input type="checkbox" id="cb25" value="Open-Plan Office" v-model="checkedBenefits" />
<label for="cb25"><img src="http://www.workatopen.com/wp-content/uploads/2019/03/icon_openspace.png" /></label>
<p>Open Office</p>
</li>
<li><input type="checkbox" id="cb26" value="Company Retreats" v-model="checkedBenefits" />
<label for="cb26"><img src="https://www.helpscout.com/images/blog/2019/oct/how-to-plan-a-company-retreat.png" /></label>
<p>Company Retreats</p>
</li>
<li><input type="checkbox" id="cb27" value="Free day-care services" v-model="checkedBenefits" />
<label for="cb27"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/kindergarten-1648730-1400660.png" /></label>
<p>Free day-care services</p>
</li>
<li><input type="checkbox" id="cb28" value="Competitive Salary" v-model="checkedBenefits" />
<label for="cb28"><img src="https://st2.depositphotos.com/5266903/9617/v/950/depositphotos_96173552-stock-illustration-salary-flat-icon.jpg" /></label>
<p>Competitive Salary</p>
</li>
<li><input type="checkbox" id="cb29" value="Life Insurance" v-model="checkedBenefits" />
<label for="cb29"><img src="https://cdn0.iconfinder.com/data/icons/life-insurance/256/Family_Life_Insurance-512.png" /></label>
<p>Life Insurance</p>
</li>
<li><input type="checkbox" id="cb30" value="Free Event Tickets" v-model="checkedBenefits" />
<label for="cb30"><img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-4/512/Tickets-icon.png" /></label>
<p>Free Event Tickets</p>
</li>
<el-button @click="modalAction()" style="background-color: red; float: inside; color: white;" class="bg-teal text-white font-bold px-4 py-2 rounded-full">Close</el-button>
</ul>
'''
Aucun commentaire:
Enregistrer un commentaire