Help that custom Section component is reset my text input when hover outside the container

Hi community,

I create a custom Section component and use this documentation to show it on my weweb page:

In my Editor DEV mode, I placed my compontent using npm run serve (local from my computer).
However, when I type a text or number in my input box and move my cursor outside the container, it clear always my input box value. Any ideas why this happens? And how to solve this issue?

Kind Regards,
Stefan

Hi,
This sound familiar…
You might have touble synchronising you input data with your dom value. Remember you have to use vueJS.
You might find better answer in the developper corner.

Hi there,

Yes, I am already using Vue.js to load the compontent in weweb DEV mode.

Regards,
Stefan

Can you share some code? It’s a bit difficult to help with custom code without knowing what you are doing.

On a side note: are you sure you need a section instead of an element? Most of the time an element is the right choice.

Hi there,

I think I use Element, Because this is my code “wwElement.vue”:

<template>
  <div id="app">
        <input type="text"
          ref="nsinput"
          :value="this.content.value"
          @change="onChange" >
  </div>
</template>

<script>
export default {
  props: {
    content: { type: Object, required: true },
  },
  }
}
</script>

And the code in this file “ww-config.js”:

export default {
  options: {
    autoByContent: true
  },
  editor: {
    label: {
      en: 'SampleID',
    },
    noHover:false,
    menuOptions: {},
    styleOptions: {},
    settingsOptions: {},
    properties: {
      textColor: {
        label: {
          en: "Text color",
        },
        type: "Color",
        defaultValue: "#F23636",
      },
    },
  },
  properties: {
    value: {
      type: "Text",
      label: {
        en: "Init value"
      },
      bindable: true,
      responsive: true,
      defaultValue: '',
    },
  },
}

I want a default text value on the first show of the web page, but when type and hover/move aways of that input box. It reset the value.

You have multiple problems.
There is no need to use this inside vue templates.
The onChange function is not specified,.
You do not need refs if you do not access the element after rendering.
The properties defined in config.js are specific to weweb, they are saved in weweb’s database. They should not be used to store your component state unless you also use some function specific to weweb to use them as variables (you can have a look to the input component on weweb-assets · GitHub).

What exactly is your goal with this component?
Do you want the value of the input to be accessible in the weweb editor or is it used for logic that stays in the element?

Hi there,

What exactly is your goal with this component?

I want a basic sample, 1 text input box. And element read the value is from the property sidebar → into the text input box. Here in my code that is the property name “value” (Init value).
And for each text “change”, it save that new text value.

Kind Regards,
Stefan

You can use directly a weweb input in your custom code. You get all the side panel options included. Check the advanced section of the developer docs, you can find a guide there. I think the type you need to use is ww-form-input.

If you want to use your own input with the initial value selectable from the side panel you need to add more weweb specific logic. Have a look at the “ww-input-basic” component in the link of the previous post. It does more things than what you need but you can see how they setup what you want.

Hi there,

Thank you for sample.
One final question. If I edit it in my input text value, how can I save this and send it to weweb database?

Kind Regards,
Stefan

My understanding is the weweb database is for storing your page (elements, data ecc). Every time you interact with the editor your changes are sent to weweb database.
For example, if you add a “short answer” element in the editor, and set the initial value, then the weweb database will get this information. When you are in preview , or the published app, and you type something in the input, this change is not sent to weweb database.
You can add code to your custom input to share the updated value with the weweb app so that it is accessible as a variable in the editor.
As I said, have a look at “ww-input-basic” repo at weweb-assets · GitHub to see how the weweb team is doing it.

1 Like