I am utilizing Vue v2
My goal is to change only the properties of the selected element. Specifically, when the response is marked after clicking, it should switch to red color with a text that reads 'Unmark'. Conversely, if the button is clicked again (which would then say 'Unmark'), it should switch to green color and the text should change to 'Mark'. Unfortunately, my current code applies these changes to every element within the v-for loop; I want it to happen only to the selected element.
I have considered using a Component to monitor any changes, but first, I would like to explore other potential solutions. Any assistance would be greatly appreciated.
Below is the code snippet:
<div class="search-results">
<div class="activity-box-w" v-for="user in users">
<div class="box">
<div class="avatar" :style="{ 'background-image': 'url(' + user.customer.profile_picture + ')' }">
</div>
<div class="info">
<div class="role">
@{{ '@' + user.username }}
</div>
<div>
<div>
<p class="title">@{{ user.customer.name }}
@{{user.customer.lastname}}
</p>
</div>
</div>
</div>
<div class="time">
<input type="button" class="btn btn-sm btn-primary" v-on:click.prevent="markUser(user)" v-model="text"
v-bind:class="[{'green-border':notMarked}, {'red-border':marked}]" v-cloak v-if="!action"
:disabled="action"></input>
</div>
</div>
</div>
Below is the script section:
new Vue({
el: '#engage-panel',
data: {
users: [],
mark: {'id' : '', 'marks' : ''},
text: 'Mark', //May change to Unmark later
action: false,
marked: null,
notMarked: null,
},
methods:
{
markUser: function(user){
this.mark.id = user.id;
this.action= true;
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
this.$http.put('/mark/user', this.mark).then(response => {
if(response.body === "marked")
{
this.mark.marks="true";
this.text = 'Unmark';
this.marked= true;
this.notMarked= false;
this.action= false;
}else{
this.mark.marks="false";
this.text = 'Mark';
this.marked= false;
this.notMarked= true;
this.action= false;
}
}).catch(e => {
this.action= false;
});
}
}