1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<template>
<div :class="{preview: true}">
<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}" />
<div class="preview-description">
<h3>{{ preview.title }}</h3>
<p>{{ preview.text }}</p>
<input :id="'accessibility-' + preview.id"
v-model="checked"
type="checkbox"
class="checkbox">
<label :for="'accessibility-' + preview.id">{{ t('accessibility', 'Enable') }} {{ preview.title.toLowerCase() }}</label>
</div>
</div>
</template>
<script>
export default {
name: 'ItemPreview',
props: {
preview: {
type: Object,
required: true,
},
selected: {
type: String,
default: null,
},
},
computed: {
checked: {
get() {
return this.selected === this.preview.id
},
set(checked) {
this.$emit('select', checked ? this.preview.id : '')
},
},
},
}
</script>
|
