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

RadioButton dynamic demo fixes

pull/3798/head
Tuğçe Küçükoğlu 2023-03-24 10:28:23 +03:00
parent 1045332e8f
commit 9e5856f05f
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
doc/radiobutton/DynamicDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-column gap-3"> <div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center"> <div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key + index" class="ml-2">{{ category.name }}</label> <label :for="category.key" class="ml-2">{{ category.name }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -26,8 +26,8 @@ export default {
selectedCategory: 'Production', selectedCategory: 'Production',
code: { code: {
basic: ` basic: `
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center"> <div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key" class="ml-2">{{ category.name }}</label>
</div> </div>
`, `,
@ -35,8 +35,8 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-column gap-3"> <div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center"> <div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key" class="ml-2">{{ category.name }}</label>
</div> </div>
</div> </div>
@ -47,7 +47,13 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCategory: null selectedCategory: 'Production',
categories: [
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
]
} }
} }
}; };
@ -56,8 +62,8 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="flex flex-column gap-3"> <div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center"> <div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" /> <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key" class="ml-2">{{ category.name }}</label>
</div> </div>
</div> </div>
@ -67,7 +73,13 @@ export default {
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const selectedCategory = ref(null); const selectedCategory = ref('Production');
const categories = ref([
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
]);
<\/script>` <\/script>`
} }
}; };