Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
Created June 14, 2019 12:18
Show Gist options
  • Select an option

  • Save onefriendaday/6e4363369d63e7b699347823f2d80b9d to your computer and use it in GitHub Desktop.

Select an option

Save onefriendaday/6e4363369d63e7b699347823f2d80b9d to your computer and use it in GitHub Desktop.
Storyblok Fieldtype validation
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `
<div>
<input
class="uk-width-1-1"
type="number"
@input="validate"
:step="1"
ref="input"
/>
<div v-if="invalid">
The number must be higher than 1 and lower than 5
</div>
</div>
`,
data() {
return {
invalid: false
}
},
methods: {
initWith() {
return {
plugin: 'number-restricted',
value: null
}
},
validate(e) {
let val = parseInt(e.target.value)
let max = 5
let min = 1
if (val > max || val < min) {
this.invalid = true
} else {
this.invalid = false
this.$refs.input.value = val
this.model.value = val
}
},
pluginCreated() {
this.$nextTick(() => {
if (this.model.value === null) {
this.model.value = this.options.default || '4'
this.$refs.input.value = this.model.value
}
})
}
},
watch: {
model: {
handler (model) {
this.$emit('changed-model', model)
},
deep: true
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment