From 8ccebbe1564fe76b376eee83ad985b934edcbfa9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Jun 2018 16:17:50 +0300
Subject: both bugs fixed. it's reactive and no more conflicting cards

---
 src/components/user_card_content/user_card_content.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 7d48870b..c7a270f1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -9,9 +9,10 @@
           <i class="icon-link-ext usersettings"></i>
         </a>
         <div class="floater" v-if="switcher || isOtherUser">
-          <input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
-          <label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
-          <input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
+          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          <input type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
+          <input type="checkbox" class="button" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
+          <label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"></label>
         </div>
         <div class='container'>
           <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-- 
cgit v1.2.3-70-g09d2