Created
July 23, 2021 14:35
-
-
Save DominikAngerer/b02b2d1b4e726dac6dc4de21477ab767 to your computer and use it in GitHub Desktop.
Starting point for custom storyloader field types
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Fieldtype = { | |
mixins: [window.Storyblok.plugin], | |
template: `<div> | |
<input class="uk-width-1-1 uk-margin-small-bottom" v-model="search" placeholder="Search" @input="searchStories" /> | |
<select multiple="true" class="uk-width-1-1" v-model="selected"> | |
<option v-for="(story, index) in stories" v-bind:key="story.uuid" :value="story.uuid">{{story.name}}</option> | |
</select> | |
<button class="uk-width-1-1 uk-margin-top uk-button-primary uk-button" @click="saveSelection">Save</button> | |
</div>`, | |
data() { | |
return { | |
stories: [], | |
search: '', | |
selected: [] | |
} | |
}, | |
methods: { | |
initWith() { | |
return { | |
plugin: 'story-loader-v2', // this needs to be your plugin name | |
selection: [], | |
} | |
}, | |
pluginCreated() { | |
console.log('plugin:created') | |
this.searchStories() | |
}, | |
searchStories() { | |
fetch('https://api.storyblok.com/v1/cdn/stories?token=' + this.options.public_token + '&per_page=25' + '&starts_with=' + this.options.folder + '&search_term=' + this.search) | |
.then(response => response.json()) | |
.then(data => this.stories = data.stories) | |
}, | |
saveSelection() { | |
this.model.selection = this.selected | |
} | |
}, | |
watch: { | |
'model': { | |
handler: function (value) { | |
this.$emit('changed-model', value); | |
}, | |
deep: true | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment