vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed duplicate key error

pull/358/head
cagataycivici 2020-07-01 20:47:14 +03:00
parent 3cc6664e18
commit 81b376e4b9
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/selectbutton/SelectButton.vue
View File

@ -3,7 +3,7 @@
<div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :aria-label="getOptionLabel(option)" role="button" :aria-pressed="isSelected(option)" <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)" @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 :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"> <slot name="option" :option="option" :index="i">
<span class="p-button-label">{{getOptionLabel(option)}}</span> <span class="p-button-label">{{getOptionLabel(option)}}</span>
</slot> </slot>
@ -93,6 +93,13 @@ export default {
onBlur(event) { onBlur(event) {
this.focusedIndex = null this.focusedIndex = null
this.$emit('blur', event); 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: { computed: {

2
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -16,7 +16,7 @@
<SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /> <SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple />
<h5>Custom Content</h5> <h5>Custom Content</h5>
<SelectButton v-model="value3" :options="justifyOptions"> <SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
<template #option="slotProps"> <template #option="slotProps">
<i :class="slotProps.option.icon"></i> <i :class="slotProps.option.icon"></i>
</template> </template>

2
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -167,7 +167,7 @@ export default {
&lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt; &lt;SelectButton v-model="value2" :options="paymentOptions" optionLabel="name" multiple /&gt;
&lt;h5&gt;Custom Content&lt;/h5&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;template #option="slotProps"&gt;
&lt;i :class="slotProps.option.icon"&gt;&lt;/i&gt; &lt;i :class="slotProps.option.icon"&gt;&lt;/i&gt;
&lt;/template&gt; &lt;/template&gt;