Custom component: How to access the value/input of a wwElement?

Developer corner
1

Hey there,

In ww-config.js I have added the following wwObject:

image
image696×141 8.78 KB

Then in my wwElement.vue file in the template I have:
image

I have another wwElement below that is of type ‘ww-text’. If in the <script> section I add a data() variable:
myvariable : 'hello there'
I can force this text into my second wwElement using :ww-props="{ text: this.myvariable }".
However, how can I grab the value that the user is entering into the ww-form-input and force it as text into my second wwElement?

I can do this easily using v-model with a normal html input but that means it can’t be modified in the editor. Using a ww-input-form allows me to modify it in the editor but I have no clue how to grab its value. As per my initial screenshot above I tried adding an id ‘user-text’ and retrieve it but I cannot find any documentation for this anywhere. I made long-shots attempts such as using :ww-props=" text: this.content.userInput.value }" which is incorrect but without documentation it is quite hard.

I also tried to search for a WeWeb-Asset or WeWeb-Public (GitHub) component which does this, but they’re mostly 5-6 levels deeper than the simple thing I am attempting to achieve.

Many thanks in advance.

2

Hey,
all our inputs are supporting a v-model like pattern, we can find an example on the datagrid

Best file to look is here

  • you provide the value through wwProps => :ww-props="{ value: 'value' }"
  • you listen to change through the element-event, which receive a type and a payload. You need to check that type is update:value, and the value will be in the value property

Example:

@element-event="onElementEvent"

onElementEvent($event) {
    if ($event.type === 'update:value') {
        this.setValue($event.value);
    }
},

If you take a look at the source code of datagrid, you will see that the only exception is for the multi select input which is using (for legacy reason), currentSelection instead of value.

An other way to do it, which is more “hacky”, will be to know the name of the variable (its an internal convention) and fetch its value. But as it rely on internal logic which may change, i discourage that.

I am writting down this usecase for later, as we will work on the dev experience at the end of the year.

Will be happy to have any feedback about your experience

Note: as a teasing, doing this with no-code reusable component will be much more easier i think :slight_smile:

1 Like
3

Thanks for your reply @aurelie !

So, perhaps I wasn’t too clear in my initial post.
This is what I am looking for:
openai help

This is super simple using <input v-model="input_text"> {{ input_text }} in the template, and in data() from the script export default I just add input_text: '' as initial value - according to the Vue.js documentation.

But I want both the input field and the text tag to be a wwElement that can be modified in the editor, so below is the closest I could get to:

image
image887×842 42.3 KB

Obviously, this is wrong. I made changes, but copy/pasting your code from here (and Github) wasn’t helpful as I don’t know how to troubleshoot.

PS: I come from coding small web-apps in R Shiny, in which I can use a debugger to step into the code and see the values declared in the environment at any time. For this scenario it would have been very easy to spot the variable/object containing the values I am entering into the input as my IDE runs the code in live. No idea how to do that here :sweat_smile:

I’m sure my feedback will be useful as a non-JS coder who is trying the journey of going beyond WeWeb’s no-code use-case. In my opinion, both aspects are equally important. No-code targets users who want a simple front-end for their clients to have a nice click/navigate experience, whereas the dev aspect can attract users who will potentially develop powerful projects that bring more money and indirect marketing to WeWeb.

1 Like
4

Hi @aeynaud, i made a test on my side, and here is a working version

<template>
  <div class="my-element">
    <wwElement v-bind="content.inputElement" :ww-props="{ value }" @element-event="onInputEvent" />
    <wwElement v-bind="content.textElement" :ww-props="{ text: value } || ''" />
  </div>
</template>

<script>
export default {
  props: {
    content: { type: Object, required: true },
  },
  data() {
    return {
      value: '',
    }
  },
  methods: {
    onInputEvent($event) {
      if ($event.type === 'update:value') {
        this.value = $event.value
      }
    }
  }
};
</script>

What’s the difference with you: I also provide a value to the input element. This is current limitation to our system, thanks for discovering this. In my opinion this should have work with your version, so i am logging this on our side for futur improvements.

If needed you can debug in your browser

  • Add a debugger instructions on your code, then open the dev tools of your browser (usually right click => inspect, or the menu More tool → Dev tools on the three dot menu of Chrome, or even CTRL+MAJ+I). Then the code will stop on this console each time it hit the debugger instructions
  • You can also go with the simple but still efficient way of putting some “console.log()” instructions and watch them on the console in the dev tools
  • You can also install the Vue devtools Chrome extension, and see a bunch of information here, but be aware that due to the Weweb layer, you may be a bit lost :slight_smile:

Always happy to help :slight_smile: