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

Ask us anything How do I?
1

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

2

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

1 Like
3

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.

4

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

5

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
6

Hi there,

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

Kind Regards,
Stefan