I have a table of users that I am currently rendering, and my goal is to highlight the entire row only for the current user.
My initial thought was to use a computed property to achieve this, but I seem to be facing some difficulties in making it work.
In the code snippet below, I left a comment outlining my approach, but unfortunately, it's not producing the desired output. Specifically, I want the row to be highlighted in pink only for the user 'nathan'.
new Vue({
el: '#app',
data: {
currentUser: 'nathan',
users: [{
name: "nathan",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c6c9dcc0c9c6e8cfc5c9c1c486cbc7c5">[email protected]</a>"
},
{
name: "sally",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff8c9e939386bf98929e9693d19c9092">[email protected]</a>"
},
{
name: "joe",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee4e1ebcee9e3efe7e2a0ede1e3">[email protected]</a>"
}
],
},
computed: {
styles: function(user) {
let height = 100
// something like this?
// if(user === currentUser)
if (user) {
return {
'background-color': 'pink'
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr v-for="user in users">
<td v-bind:style="styles">{{ user.name }}</td>
<td v-bind:style="styles">{{ user.email }}</td>
</tr>
</table>
</div>