# In D2 ui-template can't get @update:modelValue to work in v-select

**URL:** <https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [24 February 2024 16:50 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860 "2024-02-24T16:50:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 February 2024 16:50 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/1 "2024-02-24T16:50:09Z")

</div>

I am experimenting with widgets in D2 ui-template. I have a `v-select` and [the docs](https://vuetifyjs.com/en/api/v-select/#events) suggests that `@update:modelValue` should be fired when the selected value changes, but I can't get this to work. `@click` does work. This is what I have so far. The code that changes the selection when an option is passed in msg.payload does work. Can anyone see what I am doing wrong?

```auto
<template>
  <div>
    <v-select
      :items="items"
      :model-value="value"
      @update:modelValue="mvchanged"
      @click="clicked"
    ></v-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
        dropdownData: {options: ['Foo', 'Bar', 'Fizz', 'Buzz']}
    }
  },
  watch: {
      msg: function(){
          if (typeof this.msg.payload === "string" && this.dropdownData.options.includes(this.msg.payload)) {                  
              this.dropdownData.value = this.msg.payload
          }
          // prevent redraw on deploy
          //this.msg.payload = null
      }
  },
  methods:{
    mvchanged:function(){
      this.send({payload: "modelValue changed"});
    },
    clicked:function(){
      this.send({payload: "clicked"});
    },
  },
  computed : {
    items: function(){
      return this.dropdownData?.options ?? ""
    },
    value: function(){
      return this.dropdownData?.value ?? ""
    }
  }
}
</script>

```

**[Clarification Edit]** When I said that I can update the selection by passing in a message, that does change the selection but does not trigger the event.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [24 February 2024 17:07 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/2 "2024-02-24T17:07:49Z")

</div>

I think it should be `v-model="value"` going by example

```auto
<v-rating hover :length="5" :size="32" v-model="value"
    active-color="primary" @update:modelValue="send({payload: value})"/>

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 February 2024 17:15 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/3 "2024-02-24T17:15:27Z")

</div>

> [@Buckskin](#):
>
> I think it should be `v-model="value"`

Both work for me, possibly for compatibility with an older version of vue. Changing that does not make the update trigger work. The docs I linked to show model-value.  
I also tried `@change.`

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [24 February 2024 17:24 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/4 "2024-02-24T17:24:43Z")

</div>

I noticed also that `@update:modelValue` didnt work,  
when i was testing recently for another post that used v-select  
After some research on the internet, what worked for me is to use `@update:model-value="mvchanged"` instead.

```auto
<template>
  <div>
    <v-select
      :items="items"
      v-model="value"
      @update:model-value="mvchanged"
    ></v-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
        dropdownData: {options: ['Foo', 'Bar', 'Fizz', 'Buzz']},
        value: this.dropdownData?.value ?? ""
    }
  },
  watch: {
      msg: function(){
          if (typeof this.msg.payload === "string" && this.dropdownData.options.includes(this.msg.payload)) {                  
              this.dropdownData.value = this.msg.payload
          }
          // prevent redraw on deploy
          //this.msg.payload = null
      }
  },
  methods:{
    mvchanged:function(){
      this.send({payload: this.value});
    },
    clicked:function(){
      this.send({payload: "clicked"});
    },
  },
  computed : {
    items: function(){
      return this.dropdownData?.options ?? ""
    }
  }
}
</script>

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 February 2024 21:33 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/5 "2024-02-24T21:33:58Z")

</div>

> [@UnborN](#):
>
> use `@update:model-value="mvchanged"` instead.

Great, that works. Thanks.

Did you manage to access the new value? I can't work out how to do that. If, in the mvchanged function I put  
`this.send({payload: "model-value changed " + this["model-value"]})`  
then it just sends the value as undefined.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [24 February 2024 21:41 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/6 "2024-02-24T21:41:01Z")

</div>

The only way I could get this to fire an event when a msg (via an inject node) is sent to the widget is this;

```auto
<template>
  <div>
    <v-select
      :items="items"
      v-model="value"
      @update:model-value="mvchanged"

    ></v-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dropdownData: {options: ['Foo', 'Bar', 'Fizz', 'Buzz']},
      value: ""

    }

  },

  watch: {
    value: function () {
      this.send({value: this.value})

    },

  },

  methods: {
    mvchanged: function() {
      this.send({payload: this.value})
  
    },

  },

  computed : {
    items: function() {
      return this.dropdownData?.options ?? ""

    },

  },

    mounted () {               
      this.$socket.on("msg-input:" + this.id, (msg) => {
      /**
      * 
      * topic: ,
      * payload: "<value>"
      * 
      */
        if (typeof msg.payload === "string" && this.dropdownData.options.includes(msg.payload)) {
          this.value = msg.payload

        }
  
      })

    },

}
</script>

```

`mvchanged` only fires when a selection is clicked on in the dropdown. With the code above the `@update:model-value="mvchanged"` (and therefor the `mvchanged` function) is not required. The `send` works both ways (selection & msg in)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 February 2024 11:19 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/7 "2024-02-26T11:19:14Z")

</div>

All good with that solution. Thanks.

---

<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:** [11 March 2024 11:19 UTC](https://discourse.nodered.org/t/in-d2-ui-template-cant-get-update-modelvalue-to-work-in-v-select/85860/8 "2024-03-11T11:19:46Z")

</div>

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