But this seems like a one way communication where the script can change weweb variables and trigger worflows. What about the other way around? I am looking to implement a logic where when a button in weweb is clicked, it changes a variable in weweb, and when that happens, it triggers a method in the custom coded component. Any general guidance is appreciated! Thanks.
I feel like this is easily doable but im overlooking something obvious.
I have tried this and it didnt work, not sure if weweb changed things with updates. Are you able to confirm this method still works on your end? I followed ur video step by step, but console didnt print anything
Are you using Custom Coded Components, or imported JavaScript? If you’re using Custom Coded components (via dev editor) you have two options.
Using the props and exposing the values via the wwLib.wwVariable.useComponentVariable, here you could use the watch() in Vue to watch the prop’s change.
Using the wwLib.wwVariable.useComponentVariable for a two way binding, where you both expose the value and change it (and listen to its change again via watch).
Additionally as @dorilama said, you can use component Actions, but then the workflow would be → Run the action with a parameter → Get the result instead of Change variable → Listen to that change and trigger an event. But definitely a solid approach, which maybe could even simplify how you think about it.
If you’re using a custom JavaScript embed, or an NPM import, you can do what @raydeck suggests.
If you’d like to dig deeper into this, with some real life examples, I do 1:1 consulting, mostly regarding no-code, but recently, coding custom components for WeWeb is most of my daily work Custom components tend to get tricky, especially because there is no up to date docs as of now, so from my experience, these consultations bring a lot of value in terms of time saved (I had to spend my own share of time finding out so you don’t have to). If consulting doesn’t cut it for you, you can try your luck in our Brocode Land Community.
Yes, there have been some changes on their side - thank you for bringing it to my attention! I updated the scripttag with code that works:
I will however note that if you are doing this kind of work, treating it as a recipe to copy-paste is going to put you in a difficult position. The three people who have replied to you in this thread are quite advanced developers - tells you what kind of problem this is. This snippet is a solution to this class of problem, but with more information you might be able to get better counsel. This is where live help can make more progress in less time. For example, I believe @broberto offers 1-1 coaching, and State Change has daily office hours where we work on hard problems every day.
Thank for the reply, I tried using the wwLib.wwVariable.useComponentVariable but couldn’t make it work for some reason. I discovered a different way that worked, it looks like I was able to watch for changes directly using the wwLib.wwVariable.getValue. heres a test component i created:
<template>
<div class="my-element">
<p :style="textStyle">WeWeb Variable Value: {{ wewebVariable }}</p>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
// Step 1: Bind the WeWeb variable
const wewebVariable = ref(wwLib.wwVariable.getValue('189dd0b8-47f0-4767-8db8-17b8d67c6495'));
// Step 2: Watch for changes
watch(
() => wwLib.wwVariable.getValue('189dd0b8-47f0-4767-8db8-17b8d67c6495'),
(newValue) => {
// Update the reactive variable
wewebVariable.value = newValue;
// Print a message with a random integer
const randomInteger = Math.floor(Math.random() * 100); // Random integer between 0-99
console.log(Value has been changed: ${newValue}, Random: ${randomInteger});
}
);
return {
wewebVariable
};
}
};
</script>
this seems more straightforward and it worked. I click on a button inside weweb → it changes the variable value → when that change happens → console is printing the message , which means this little script was able to successfully listen to changes made in weweb and execute the code inside the watch block.
What do you think about this approach, seems efficient to me right?
Can you elaborate a bit more for this approach if you dont mind, I don’t quite follow what you mean. I was looking for the other way around, by having my custom vue component listen to changes for variables inside weweb, then execute code inside the custom component not weweb.
It’s a solution - you’re running that function basically 60x per second - as long as the function is cheap (compared with what you are trying to do) you should be fine. I like your approach to using the Composition API.
one approach (that works both in custom code components or nocode ones) is to use events and actions to interact between component and parent.
the component triggers events, the parent can initiate workflows from the events.
the component exposes actions, the parent can use the actions inside workflows. See the ww-input-basic component for an easy example with custom code and the “actions” section in nocode components.
of course it’s not the only way: in custom code component you can watch variables and react when they change.
Custom components tend to get tricky, especially because there is no up to date docs as of now, so from my experience, these consultations bring a lot of value in terms of time saved (I had to spend my own share of time finding out so you don’t have to). If consulting doesn’t cut it for you, you can try your luck in our 
Brocode Land Community.