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

Improved checkbox demo with dynamic values demo

pull/5/head
cagataycivici 2018-12-15 13:10:49 +03:00
parent bde0604431
commit 93f33a7a86
1 changed files with 10 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -29,26 +29,14 @@
</div> </div>
Selected City : {{this.city}} Selected City : {{this.city}}
<h3>Advanced with Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div v-for="theme of themes" :key="theme.key" class="p-col-12">
<p-radioButton inputId="theme1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="theme" /> <p-radioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'"/>
<label for="theme1" class="p-radiobutton-label">Ultima</label> <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
</div>
<div class="p-col-12">
<p-radioButton inputId="theme2" name="template" :value="{brand: 'Serenity', key: 'S'}" v-model="theme" />
<label for="theme2" class="p-radiobutton-label">Serenity</label>
</div>
<div class="p-col-12">
<p-radioButton inputId="theme3" name="template" :value="{brand: 'Apollo', key: 'A'}" v-model="theme" />
<label for="theme3" class="p-radiobutton-label">Apollo</label>
</div>
<div class="p-col-12">
<p-radioButton inputId="theme4" name="template" :value="{brand: 'Babylon', key: 'B'}" v-model="theme" :disabled="true"/>
<label for="theme4" class="p-radiobutton-label">Babylon</label>
</div> </div>
</div> </div>
Selected Template : {{this.theme}} Selected Theme : {{this.selectedTheme}}
</div> </div>
</div> </div>
</template> </template>
@ -57,14 +45,13 @@
export default { export default {
data() { data() {
return { return {
city: 'null', city: null,
theme: {brand: 'Serenity', key: 'S'} themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedTheme: null
} }
}, },
methods: { created() {
onChange() { this.selectedTheme = this.themes[1];
console.log('change');
}
} }
} }
</script> </script>