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>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
<label :for="category.key + index" class="ml-2">{{ category.name }}</label>
<div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
</div>
</div>
@ -26,8 +26,8 @@ export default {
selectedCategory: 'Production',
code: {
basic: `
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
<div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
`,
@ -35,8 +35,8 @@ export default {
<template>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
<div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
</div>
@ -47,7 +47,13 @@ export default {
export default {
data() {
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>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
<div v-for="category in categories" :key="category.key" class="flex align-items-center">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
</div>
@ -67,7 +73,13 @@ export default {
<script setup>
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>`
}
};