How to access blueprint variables within the index.js file?

Kirby 3 Solved ✅
1

Hi all,
i try to access my blueprint fields within the index.js to make a preview for my custom blocks. I have tried content.myvar but this does not work. Also mytabname.myvar does not work. thx for help!

    panel.plugin("your-project/button-block", {
  blocks: {
    button: {
      computed: {
        placeholder() {
          return "Button text …";
        }
      },
      template: `
        <input
          type="text"
          :placeholder="placeholder"
          :value="content.text"
          @input="update({ text: $event.target.value })"
        />
      `
    }
  }
});


name: Button
icon: bolt
tabs:
  content:
    fields:
      link:
        type: url
      text:
        type: text
  styles:
    fields:
      class:
        type: text
      id:
        type: text
2

Via content.link you should be able to get all field values, in the same way you already use content.text. What exactly are you trying to achieve?

3

i try to access my blueprint fields:

<p v-html="content.btText"></p>

i figured out that i have to write the field names in lower cases:
content.btText = content.bttext

that was the problem.

4

<p v-html="content.btimage"></p>

this shows the object dump of the image.
Hot to access the url: content.btimage.url is empty?

5

got it. It is an array: content.btimage[0].url

6

Yep, and you should probably use a computed property, see Custom preview for block with image upload breaking on creation

7

works! thx alot!

8

glad my problem could be of service ^^