Comments (4)
Thanks for the sample @andyjamesn, pretty helpful 💯
I tested it out here, and it worked nicely 🤔. I suspect the issue might be related to the options not being set correctly in the sandbox.
If so, could you confirm if the options you configured in the field-plugin.config.json
are present in the sandbox URL, after running yarn dev
?
from field-plugin.
Ah I see. Since the options are set in the manifest, when options are added or changed the dev server needs to be restarted.
Thanks for all the help, all sorted now!
from field-plugin.
Hey @andyjamesn 👋 ,
thanks for reaching out to us and for all the provided details.
Since a field plugin is embedded within an iframe, all communication between the plugin and the container (such as the Sandbox) is done asynchronously. This means that if you try to access the data property right after calling the useFieldPlugin helper, it won't return anything.
The plugin needs to wait for the container to send the data back before it can use it. To determine when all the data is ready, you can check the plugin.type
property to see if its value is loaded
.
So, I would suggest you try the following approach which I think may fix the issue:
const plugin = useFieldPlugin()
watch(
() => plugin.type,
(type) => {
if (type === 'loaded') { // make sure to access the data only after the plugin is correctly loaded.
console.log('options', plugin.data?.options)
}
},
)
Let me know if it helped you 🙌
from field-plugin.
Hey @demetriusfeijoo
I am already using the same watch in my code and had tested logging options in it.
I posted a simplified version of my code in my initial post.
I do this to create a setContent helper so I do not need to do plugin.actions.setContent and also to setup my initial content because even though I am adding it in validateContent it is not being set.
watch(
() => plugin.type,
(type) => {
if (type === 'loaded') {
setContent = plugin?.actions?.setContent
Object.assign(form, plugin.data.content)
// logging options is empty
console.log(plugin?.data?.options)
}
},
)
Here is my entire file. I added your exact code too (but it is the same as mine) to be sure and get an empty object
<script setup>
import { reactive, watch } from 'vue'
import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
const initialForm = {
title: 'Hello',
description: 'World',
}
const plugin = useFieldPlugin({
validateContent: (content) => ({
content:
typeof content === 'object'
? content
: {
...initialForm,
},
}),
})
// this is often undefined so we will set it in the watcher
let setContent = plugin?.actions?.setContent;
let form = reactive({ ...initialForm })
// watch plugin
watch(
() => plugin.type,
(type) => {
if (type === 'loaded') {
setContent = plugin?.actions?.setContent
Object.assign(form, plugin.data.content)
console.log(plugin?.data?.options)
}
},
)
// code from demetriusfeijoo <-- also empty options: {}
watch(
() => plugin.type,
(type) => {
if (type === 'loaded') { // make sure to access the data only after the plugin is correctly loaded.
console.log('options', plugin.data)
}
},
)
// watch form for changes and update content
watch(form, (v) => {
setContent({ ...v })
});
</script>
<template>
<SbTextField
v-bind="{ label: 'Text input' }"
v-model="form.title"
/>
<SbTextField
v-bind="{ label: 'Description' }"
v-model="form.description"
/>
</template>
from field-plugin.
Related Issues (20)
- Use data source for options HOT 4
- Sandbox not working in the browser Brave due to ad blocker HOT 1
- Multirepo pnpm install fails after creation HOT 8
- Wrong modal iframe heigth HOT 5
- Visual Editor does not detect changes in custom field plugin HOT 6
- Possibility to edit complete data structure in Field Plugin Sandbox HOT 3
- Access FieldPlugin options from within validateContent HOT 1
- Cannot find module '@storyblok/field-plugin/test' or its corresponding type declarations. HOT 3
- Add selected interface app language HOT 2
- Vue3 plugin options from useFieldPlugin hook is `undefined` HOT 2
- Field Plugin height is not correctly updated HOT 1
- [sandbox] Preserve settings in URL query parameters for easy sharing HOT 1
- Extend CLI with --publish flag option configurable
- Extend CLI deploy command with --spaces flag option configurable HOT 4
- Extend CLI to enable deleting field-type plugins HOT 4
- Add easy access to current block data object HOT 3
- Field plugins do not work on domains other than app.storyblok.com
- Vite 5 support ?
- "actions.selectAsset()" only returns the filename but not things like Alt Text or Asset ID HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from field-plugin.