Giter VIP home page Giter VIP logo

Comments (4)

demetriusfeijoo avatar demetriusfeijoo commented on July 1, 2024 1

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?

Screenshot 2024-05-28 at 11 37 11

Screenshot 2024-05-28 at 11 29 49

from field-plugin.

andyjamesn avatar andyjamesn commented on July 1, 2024 1

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.

demetriusfeijoo avatar demetriusfeijoo commented on July 1, 2024

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.

andyjamesn avatar andyjamesn commented on July 1, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.