How to programmatically save new value

Ask us anything How do I?
1

Hi there,

I create an element (Vues.JS). And I can read programmatically this this.content.data on the label:

<template>
     <label>{{ content.data }}</label>
</template>

Below this template, I have this code:

export default {
    inheritAttrs: false,
    props: {
        content: { type: Object, required: true },
    },
    mounted() {
          setInterval(function(){
              var thatNewValue = Math.random();
              // how to save value ??? (this does not work)
              this.content.data = thatNewValue;
          }, 3000);
    },
};

My question is, how to save this new value back to weweb.io, short and if possible as one line.
That without the use of other visible inputs.

Kind Regards,
Stefan

2

do you need to access this updated value in the weweb editor?

If you need to use it only inside your component, (for example in your code you need to update the value in the label), then you can just declare reactive state inside your component (initializing it with the value from the content) and use that state both in the template and the interval callback. See https://vuejs.org/ for how to handle state in vue.

If you need to use the value in weweb editor you can do it but it is not documented. Have a look at weweb open source components to see how it’s done. Look for the input element. I recommend reading the code of some components here if you want to build custom components for weweb.

3

Be aware that updated content is something which can only happen on the editor (on not on the published website). See content as a configuration you edit on the editor.

  • If this is an internal state, as dorilama explained, just create an internal state, and use content value as initial value
  • If you need a variable share with other component, you can take a look at our input component, and use the useComponentVariable composition api to declare a component variable
  • If you just want internal logic on the editor to update component configuration, there is an event “update:content” but be aware that it will only work on editor.
1 Like