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

[ektoekto]

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.

<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>

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.

[Steve-Mcl]

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

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

[ektoekto]

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:

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

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

<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>