# How to bring in a msg.payload array to template?

**URL:** <https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 March 2024 15:30 UTC](https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298 "2024-03-09T15:30:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ektoekto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ektoekto/32/89084_2.png) [@ektoekto](https://discourse.nodered.org/u/ektoekto)\
**Post date:** [9 March 2024 15:30 UTC](https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298/1 "2024-03-09T15:30:07Z")

</div>

I'm trying to build a function where I could input some temperature value limits, that are then used else were in the project. Like I could give a number that is how low and how high temperature can get. This is for a kind of setup page in my system.

In this example I have two v-text-field elements just for testing.

```auto
<template>
    <v-text-field
      v-model="range[0]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @update:model-value="send({payload: range})"
    ></v-text-field>
    <v-text-field
      v-model="range[1]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @update:model-value="send({payload: range})"
    ></v-text-field>
</template>
<script>
  export default {
    data() {
      return {
        range:[5,6],
      }
    },
  }
</script>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf691774c0c46d2ae6a7307b1f1fd99645ed454a.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66e52758cf9d25d2aa06e1aee7217016f343ea21.png)

I would like to send a payload with an array to the template and have my numbers update the ones that are currently in the "Range"-array. So when someone has changed those limits, the template is using the correct stored numbers.

When the user changes a value, it's then sent out using the @update function and that works. When I change the numbers, I get them out as a stings. I then have a separate function to push them trough a parseFloat. Ideally I would like them to be sent as numbers so I don't need to fix them.

How can I read in msg.payload?  
How can I update the range-array with the one in the payload?  
I know that the whole template should be built differently and have tried scopes and Watches and so fort, but have not found a working solution.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 March 2024 16:13 UTC](https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298/2 "2024-03-09T16:13:01Z")

</div>

You could add a `watch` on "msg". When something about the msg matches your requirements, update the local data value.

```auto
  export default {
       data() {
           return {
               range:[5,6],
           }
       },
        watch: {
            msg: function () {
                if (msg.topic === "set") { // optional topic check
                    this.range = this.msg.payload
                }
            }
        },
  }

```

---

<div class="post-metadata">

**Author:** ![ektoekto](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ektoekto/32/89084_2.png) [@ektoekto](https://discourse.nodered.org/u/ektoekto)\
**Post date:** [9 March 2024 16:17 UTC](https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298/3 "2024-03-09T16:17:45Z")

</div>

Thanks Steve.

As a last ditch effort, I decided to try ChatGPT. And what do you know, it seem to know a lot about the issue. After couple of iterations, I was at a point where it would give me a code that can read in an array:

```auto
<template>
    <v-text-field
      v-model="value[0]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
    ></v-text-field>
    <v-text-field
      v-model="value[1]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
    ></v-text-field>
</template>

<script>
export default {
  data() {
    return {
      value: [5, 6],
    };
  },
  watch: {
    msg: {
      handler(newVal) {
        // Update the value array when the msg changes
        this.value = newVal.payload;
      },
      deep: true,
    },
  },
};
</script>

```

Or a code that can output an array:

```auto
<template>
    <v-text-field
      v-model="value[0]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @input="updateValue(0)"
    ></v-text-field>
    <v-text-field
      v-model="value[1]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @input="updateValue(1)"
    ></v-text-field>
</template>

<script>
export default {
  data() {
    return {
      value: [5, 6],
    };
  },
  methods: {
    updateValue(index) {
      // Update the specific value in the array
      this.value[index] = parseFloat(this.value[index]);

      // Send the updated values to Node-RED
      this.send({ payload: this.value });
    },
  },
};
</script>

```

But it never gave one that does both. So is just combined them and now it works 😃 This is the one that can read and write an array.

```auto
<template>
    <v-text-field
      v-model="value[0]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @input="updateValue(0)"
    ></v-text-field>
    <v-text-field
      v-model="value[1]"
      density="compact"
      style="width: 70px"
      type="number"
      variant="outlined"
      hide-details
      single-line
      @input="updateValue(1)"
    ></v-text-field>
</template>

<script>
export default {
  data() {
    return {
      value: [5, 6],
    };
  },
  methods: {
    updateValue(index) {
      // Update the specific value in the array
      this.value[index] = parseFloat(this.value[index]);

      // Send the updated values to Node-RED
      this.send({ payload: this.value });
    },
  },
   watch: {
    msg: {
      handler(newVal) {
        // Update the value array when the msg changes
        this.value = newVal.payload;
      },
      deep: true,
    },
  },
};
</script>

```

---

<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:** [8 April 2024 16:17 UTC](https://discourse.nodered.org/t/how-to-bring-in-a-msg-payload-array-to-template/86298/4 "2024-04-08T16:17:56Z")

</div>

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