83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<div v-bind:class="{'checked': checked}">
|
|
<div class="item-primary">
|
|
{{level}}
|
|
</div>
|
|
<div class="item-content has-secondary" v-on:click="openSpell">
|
|
<div>
|
|
{{spell.name}}
|
|
</div>
|
|
<div>
|
|
{{classes}}
|
|
</div>
|
|
</div>
|
|
<div class="item-secondary">
|
|
<i
|
|
class="float-left text-primary"
|
|
v-if="checked"
|
|
v-on:click="checked = false"
|
|
>bookmark</i>
|
|
<i
|
|
class="float-left"
|
|
v-else
|
|
v-on:click="checked = true"
|
|
>bookmark_border</i>
|
|
<q-checkbox
|
|
class="float-right"
|
|
v-model="checked"
|
|
@input="toggle"
|
|
></q-checkbox>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { state, dispatch } from '../store'
|
|
|
|
let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
|
|
|
|
export default {
|
|
computed: {
|
|
level () {
|
|
return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0)
|
|
},
|
|
school () {
|
|
return capitalize(this.spell.school)
|
|
},
|
|
classes () {
|
|
return this.spell.classes.map(cla => capitalize(cla)).join(', ')
|
|
},
|
|
checked () {
|
|
return this.state.chosen.indexOf(this.spell.name) >= 0
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
state
|
|
}
|
|
},
|
|
props: [
|
|
'spell'
|
|
],
|
|
methods: {
|
|
openSpell (event) {
|
|
this.$router.push('/spell/' + this.spell.name)
|
|
},
|
|
toggle (want) {
|
|
dispatch({
|
|
type: 'CHANGE_CHOSEN',
|
|
data: {
|
|
want,
|
|
name: this.spell.name
|
|
}
|
|
})
|
|
console.log(state.chosen)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
.item-secondary
|
|
width: 50px
|
|
</style>
|