VueJS / UIBuilder - v-for ranged values not being passed to Node-Red

General
1

I am messing around with UIBuilder and decided to try to learn VueJS. My coding skills in Javascript/html/css are basic, at best.

I think my issue is more VueJS than NodeRed, but not 100% sure. I started this project building right off the "simple vuejs example" in UIBuilder that already had the functions to pass messages to NodeRed.

So rough example of what I am trying to do, say I need to pass 10 first and last names to NodeRed:

<div v-for="n in 10">
   <label :for="'fname'+[n]">First Name</label>
   <input type="text" :id="'fname'+[n]" :name="'fname'+[n]" :v-model="'fname'+[n]">

     <label :for="'lname'+[n]">Last Name</label>
     <input type="text" :id="'lname'+[n]" :name="'lname'+[n]" :v-model="'lname'+[n]">
</div>

<b-button id="SaveNames" v-on:click="SendNames">Save</b-button>

In my index.js file I have:

SendNames: function () {
            // Set topic and send message
            var topic = this.msgRecvd.topic || 'OMS/SendNames'
            uibuilder.send({
                'topic': topic,
                'payload': {
                    'fname1': this.fname1,
                    'lname1': this.lname1,
                    'fname2': this.fname2,
                    'lname2': this.lname2,
                    'fname3': this.fname3,
                    'lname3': this.lname3,
                     etc...

Using this, if I click the "Save" button... all the values show up in the NodeRed debug, but all values are blank.

Now, if I get rid of the v-for loop, and the dynamic names and just hard code everything.. it works perfectly.

<div>
   <label for="fname1">First Name</label>
   <input type="text" id="fname1" name="fname1" v-model="fname1">

     <label for="lname1">Last Name</label>
     <input type="text" id="lname1" name="lname1" v-model="lname1">

   <label for="fname2">First Name</label>
   <input type="text" id="fname2" name="fname2" v-model="fname2">

     <label for="lname2">Last Name</label>
     <input type="text" id="lname2" name="lname2" v-model="lname2">

   <label for="fname3">First Name</label>
   <input type="text" id="fname3" name="fname3" v-model="fname3">

     <label for="lname1">Last Name</label>
     <input type="text" id="lname3" name="lname3" v-model="lname3">

      (etc etc etc)
</div>

<b-button id="SaveNames" v-on:click="SendNames">Save</b-button>

Any values typed into the input fields passes through properly this way....

I'd MUCH rather use the v-for loop, but I cannot figure out why the values start passing blank. If anyone has some insight, or a direction I should research, I'd appreciate it.

2

If you can make some simple adjustments to your data, this will become easy.

Use a Vue data variable called something like names

  names: [
    {fname: '', lname: ''},
    // repeat for as many as you need at the start
  ],

Now you can use a v-for: <li v-for="name in names">

Gotta go and deal with the family - will be back in a couple of hours or so if you need more help.

1 Like
3

I really appreciate the answer! I've spent some time working on it, and it's also helped in finding new search results to read/study as I learn VueJS...

After implementing:

 names: [
    {fname: '', lname: ''},
    // repeat for as many as you need at the start
  ],

I can get all the looping functionality and v-modal names to be correct, but I still get blank results in the NodeRed debug.

I feel like I need to change the function below that collects the data in the input and passes it to NodeRed:

SendNames: function () {
            // Set topic and send message
            var topic = this.msgRecvd.topic || 'OMS/SendNames'
            uibuilder.send({
                'topic': topic,
                'payload': {
                    'fname1': this.fname1,
                    'lname1': this.lname1,
                    'fname2': this.fname2,
                    'lname2': this.lname2,
                    'fname3': this.fname3,
                    'lname3': this.lname3,
                     etc...

Still studying and doing research on my own... just feel like there is some little piece I am missing that will connect the dots here.

4

Right, so you've got the basics. The next step is to decide when/how you want to send the data back to Node-RED. You've got a button that calls the SendNames method on clicking (incidentally, a small thing. function and variable names in JavaScript, by convention, generally start with lower-case. An opening upper case is reserved for Class definitions - it is only a convention but useful when expanding your code or sharing with others).

So now, your SendNames function needs to be:

SendNames: function () {
            // Set topic and send message
            var topic = this.msgRecvd.topic || 'OMS/SendNames'
            uibuilder.send({
                'topic': topic,
                'payload': this.names
           })
}
1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.