From 81b376e4b974681611f2fcb9d43e5546d0499d47 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 20:47:14 +0300
Subject: [PATCH] Fixed duplicate key error

---
 src/components/selectbutton/SelectButton.vue | 9 ++++++++-
 src/views/selectbutton/SelectButtonDemo.vue  | 2 +-
 src/views/selectbutton/SelectButtonDoc.vue   | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index a1637f171..7c2ba4e71 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/src/components/selectbutton/SelectButton.vue
@@ -3,7 +3,7 @@
         <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :aria-label="getOptionLabel(option)" role="button" :aria-pressed="isSelected(option)"
             @click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option)"
             :tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy" v-ripple
-            :class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
+            :class="getButtonClass(option, i)">
             <slot name="option" :option="option" :index="i">
                 <span class="p-button-label">{{getOptionLabel(option)}}</span>
             </slot>
@@ -93,6 +93,13 @@ export default {
         onBlur(event) {
             this.focusedIndex = null
             this.$emit('blur', event);
+        },
+        getButtonClass(option, i) {
+            return ['p-button p-component', {
+                'p-highlight': this.isSelected(option), 
+                'p-disabled': this.isOptionDisabled(option), 
+                'p-focus': (i === this.focusedIndex)
+            }];
         }
     },
 	computed: {
diff --git a/src/views/selectbutton/SelectButtonDemo.vue b/src/views/selectbutton/SelectButtonDemo.vue
index 4a4ff58f5..5ba3b2b38 100755
--- a/src/views/selectbutton/SelectButtonDemo.vue
+++ b/src/views/selectbutton/SelectButtonDemo.vue
@@ -16,7 +16,7 @@
                 <SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
 
                 <h5>Custom Content</h5>
-                <SelectButton v-model="value3" :options="justifyOptions">
+                <SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
                     <template #option="slotProps">
                         <i :class="slotProps.option.icon"></i>
                     </template>
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index dc64104b0..1d48c4ab5 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -167,7 +167,7 @@ export default {
 &lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt;
 
 &lt;h5&gt;Custom Content&lt;/h5&gt;
-&lt;SelectButton v-model="value3" :options="justifyOptions"&gt;
+&lt;SelectButton v-model="value3" :options="justifyOptions" dataKey="value"&gt;
     &lt;template #option="slotProps"&gt;
         &lt;i :class="slotProps.option.icon"&gt;&lt;/i&gt;
     &lt;/template&gt;