Error Cannot read properties of undefined (reading 'title')

Hi community,

I try to load text property in my custom selection component.
I copy this code in my ww-config.js file:

 title: {
      label: {
        en: "Title",
      },
      type: "Text",
      defaultValue: "My title",
    },

And this in my wwElement.vue:

<div class="my-element">
    <h1>{{ content.title }}</h1>
    <p :style="textStyle">I am a custom element !</p>
  </div>

Source:

However, when I run this code and open my Editor DEV with the Chrome inspector open. It said this error:
wwElement.vue?a729:82 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘title’)
How can I solve this problem?

Also, how can I use this setting value to set this size attribute value?
<input type="text" class="sample" size="{{ content.title }}">

Kind Regards,
Stefan

Do you have the content as a defined prop on your Vue component?

1 Like

For the size property, you can add this on your config.js file

fontSize: {
            label: {
                en: 'Size',
                fr: 'Taille',
            },
            type: 'Length',
            options: {
                unitChoices: [
                    { value: 'px', label: 'px', min: 1, max: 100 },
                    { value: 'em', label: 'em', min: 1, max: 10, digits: 2 },
                    { value: 'rem', label: 'rem', min: 1, max: 10, digits: 2 },
                ],
            },
            responsive: true,
            states: true,
            defaultValue: '16px',
        },

And then use this property value to add some style on your text.

Do you have the content as a defined prop on your Vue component?

An example code of what you mean?
I am just a beginner developer in weweb platform.

And then use this property value to add some style on your text.

I can create good the property, however, I can not get it to read the value in my ‘wwElement.vue’ file.

Kind Regards,
Stefan

On the script part you should see something like that. It means that your component is having a content props define

export default {
    props: {
        content: { type: Object, required: true },
    },
}

For the style, you should define a Vue computed returning the style you want to apply to your text. You can take a look at our own components to have example, everything is open source.

1 Like

Hi there,

Now I see the value.
It should be mentioned in that dev documentation page.

Kind Regards,
Stefan