Returns the value of the input cost in a variable

Developer corner
1

Well, as we know, when we put a value in the weweb io input, we can use it in formulas through variables.

I’m trying to make a custom component with Primevue, so far I managed to import an input from Primevue, the problem I found nowhere explaining how to return the value of the input in weweb io. I even tried looking in the component codes on github, but there are many lines with different functions, which makes it difficult to understand.

<template>
  <div>
    <InputNumber 
      v-model="inputValue" 
      inputId="currency-br" 
      mode="currency" 
      currency="BRL" 
      locale="pt-BR" 
      unstyled
      :placeholder="content.placeholder" 
    />
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
import InputNumber from 'primevue/inputnumber';

export default {
  components: {
    InputNumber
  },
  props: {
    content: { 
      type: Object, 
      required: true 
    },
    value: { 
      type: Number, 
      required: true 
    }
  },
  data() {
    return {
      inputValue: this.value // Inicialize inputValue com o valor da prop value
    };
  },
  watch: {
    inputValue(newValue) {
      this.$emit('input', newValue); // Emita um evento de input sempre que inputValue mudar
    },
    value(newValue) {
      this.inputValue = newValue; // Atualize inputValue se a prop value mudar externamente
    }
  }
};
</script>

<style scoped>
::v-deep #currency-br::placeholder {
  color: white;
}

::v-deep #currency-br {
  height: 50px;
  background-color: #b1b1b1;
  width: 100%;
  color: white; /* Caso queira a cor do texto também branca */
  border-radius: 16px;
  border: 0;
}
</style>

So far I’m getting the input value, but I’m not getting it to show in the editor, does anyone know how to help me?

2

Since you are building an input have you read the code of weweb’s input element? it’s open source on github, it’s actually a manageable size to read and you learn a lot of useful stuff for developing custom code components in weweb.

assuming you are with vue, what you are looking for is here in the setup function.