I'm currently working on a webpage where I need to dynamically display table rows based on checkbox selections. After researching, I found a helpful example on Stack Overflow: Hide/show table rows based on checkbox
However, my issue lies in receiving an array instead of formatted rows as a response. I'm not sure what step I might be missing here.
If possible, please review the code snippet below for further clarification: https://jsfiddle.net/4roe2kjq/1/
<html>
<style>
td {
border: thin solid black;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px
}
</style>
<script src="/javascript/vue.js"></script>
<div id="app">
<div v-for="val in cbValues">
<label>
<input type='checkbox' :value='val' v-model="selectedType">
{{val}}
</label>
</div>
<table>
<template v-for="c in staff_member">
<tr v-if="isVisible(c)">
<td>{{c.courses}}</td>
</tr>
</template>
</table>
<script>
new Vue({
el: '#app',
data: {
selectedType: [],
staff_member:[{
description :'Non-lab Staff Member',
courses:[
{course :'first'},
{course :'second'}
]
}],
cbValues: [
'Non-lab Staff Member'
]
},
methods: {
isVisible(row) {
const matchedValue = this.cbValues.find(v => row.description.indexOf(v) >= 0);
if (!matchedValue) {
return true;
}
return this.selectedType.includes(matchedValue);
}
}
});
</script>