Vuetify form with submit button in dash2 ui-template node - need help

[thebaldgeek]

I'm trying to get a a vuetify table with 3 or so text entries and a button that will then send the data the user has entered to the next part of the flow.

Mashing up two sources of info to try and get this working.
Firstly, the vuetify form:

Form component — Vuetify

Testing the top one on this page since it has three text entry boxes with some checks that are very close to what I'd like to have (number of chars etc):

After the boxes are good to go, the user will press a button and send the data into the remaining part of the flow (sqlite select statement).

To get the button working in Node-RED, I'm trying to use this code:

Template ui-template | Node-RED Dashboard 2.0

The built-in functions example.

When you put some text in to one of the form boxes and hit the button you get a big annoying popup in the browser saying you pushed the button.
Click OK on that and you get a cryptic debug payload:

None of them contain the 'hello world' I put in to one of the text boxes.
Even more interesting, you can click the button as much as you want, nothing happens.
No matter what text you put in or combo of buttons, you don't get another debug message until you refresh the browser tab, then it works one time, but again, nothing from the form in in the debug.

I can't expect the user to know they have to refresh the tab between form entries or guess what they typed so there must be a way to get a vuetify table entry form with a 'submit' button to send a msg.payload somehow in the ui-temptate node in dashboard 2.0?

Here is a simple (single text box and button) that I have been testing.

<template>
  <v-sheet class="mx-auto" width="300">
    <v-form @submit.prevent>
      <v-text-field v-model="firstName" :rules="rules" label="First name"></v-text-field>
      <button class="my-class" onclick="onClick()">My Button</button>
    </v-form>
  </v-sheet>
</template>

<script>
    /* Write any JavaScript here */
    // add our onClick function to the window object to make it accessible by the HTML <button>
    window.onClick = function () {
        alert('Button has been clicked')
    }

    // Use send() function to pass on data back into Node-RED:
    this.send('Component has loaded')

    // Subscribe to the incoming msg's
    this.$socket.on('msg-input:' + this.id, function(msg) {
        // do stuff with the message
        alert('message received: ' + msg.payload)
    })
</script>

Thanks for your time to help out.

[Steve-Mcl]

Try this instead:

<template>
    <v-sheet class="mx-auto" width="300">
        <v-form @submit.prevent>
            <v-text-field v-model="firstName" label="First name"></v-text-field>
            <v-text-field v-model="feedback" label="Feedback"></v-text-field>
            <v-btn @click="onClick()">Submit</v-btn>
        </v-form>
    </v-sheet>
</template>

<script>
    export default {
        data() {
            return {
                firstName: null,
                feedback: null
            }
        },
        methods: {
            onClick: function () {
                const payload = {}
                payload.firstName = this.firstName
                payload.feedback = this.feedback
                this.send({ payload })
            }
        }
    }
</script>

[joepavitt]

Any particular reason youre not using the in-built form node?

[Steve-Mcl]

@joepavitt

Any particular reason youre not using the in-built form node

I was gonna ask the same Joe but figured there was a reason

Interested to know why tho (are there short-comings for example?)

For me, recently, I wanted to use it (ui-form) for a demo but there is no options/dropdown so had to resort to a template.

[thebaldgeek]

Thanks @Steve-Mcl That code snip works great.
Two text entry areas, one button, no popup and debug has the data.

@joepavitt

Any particular reason youre not using the in-built form node?

Four reasons:

1. Like all other dash 2.0 UI parts, the form is needlessly huge.
2. Like the other UI nodes, you cant control its layout.
3. Like the other UI nodes, its not responsive.
4. As Steve mentioned, no drop-down to handle multi options.

[joepavitt]

Please do make issues, feature requests, bug reports, etc with details on what you're seeing vs. what you expect to see and we can addresss the problems