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

**URL:** https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662
**Category:** General
**Tags:** uibuilder
**Created:** [10 March 2022 16:14 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662 "2022-03-10T16:14:40Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Dustin](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dustin](https://discourse.nodered.org/u/Dustin)
#### Post date: [10 March 2022 16:14 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662/1 "2022-03-10T16:14:41Z")

</div>

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:

```auto
<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:

```auto
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.

```auto
<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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 March 2022 17:34 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662/2 "2022-03-10T17:34:08Z")

</div>

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

Use a Vue data variable called something like `names`

```auto
  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.

---

<div class="post-metadata">

### Author: ![Dustin](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dustin](https://discourse.nodered.org/u/Dustin)
#### Post date: [10 March 2022 19:53 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662/3 "2022-03-10T19:53:50Z")

</div>

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:

```auto
 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:

```auto
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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 March 2022 20:06 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662/4 "2022-03-10T20:06:46Z")

</div>

> [@Dustin](#):
>
> I can get all the looping functionality and v-modal names to be correct, but I still get blank results in the NodeRed debug

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:

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

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [30 March 2022 08:26 UTC](https://discourse.nodered.org/t/vuejs-uibuilder-v-for-ranged-values-not-being-passed-to-node-red/59662/5 "2022-03-30T08:26:22Z")

</div>

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