defineModel modifier doesnt return "modified" value Vue

[mystic helm]

Hello, i'm using the new defineModel in the latest version of vue using Nuxt, in my custom component i add the model as "v-model:item.split" however the modifier doesnt seem to apply the effect. This is an example which i'm trying to work with. Am i doing something wrong here?

The setter function doesnt seem to work at all , i tried using some random return value on the outside scoped return and it still doesnt work in my template

const [item, modifier] = defineModel<ItemAnnotation>("item", {
  set(value) {
    if (modifier.split) {
      return `${value.fullname.split("-"}`;
    }
    return value;
  },
});

[hardy briar]

i haven't tried advanced usage like this yet

let's see 🙂

[hardy briar]

this line is not valid fyi:
return ${value.fullname.split("-"};

[mystic helm]

Oh thank you for responding. here's another test i've been trying a bit simpler

https://play.vuejs.org/#eNqNUn9v0zAQ/SqWhbRWahNBkZBCNg1Q/wBpgMb4CyMtJJfWI7Et/8haonx37pK1ZAGqtVJk3z3fe/fuWv7GmKgJwBOeutxK45kDH8yFULI22nrWMgsl61hpdc3OEHp2TF3t32k8KVD+IR3FoxjVRTBjQuVaOc884Oec6s1aoVRWQyL4FqpKC74QyliZQ/L8xQrPebAWVL5HwPrrteDdXKg0HhSiNrx4qE2VecAbYzdb6ZhUJniWZ0b6rJK/wDFowO79VqoN2+vAUBPYhPDpWHr/a5a1LqBKJNaNNlYHcy44CRacxciRxkdCvuCTLk+5lyMweCgmFtJ/cOUbUS4Y0stSgv2ODhVQSgVXJGgmOOXRIIaekXZkmDVZFWBOEVnODi8H2XMMWhRhFbt91vbAqHe2Y4frwdzuVqgOp/MAH5I0FqTpcAjd/PUJ1wc1qblgbUsSuy6NqfPHTnmHXZZyE905rdAnVIcLwckVWYH9ZLxEFwRPqBkahOAZLsT9hz7mbQAUMsTzLeQ//xG/czuKCf7ZggPbQL9NQ85ndgM4Q0qvv3yEHZ6PSTQuVIg+kbwGp6tAGgfY26AKlD3C9Wrf99PGPbtx650H5Q5NkVBCkp2ExuHT5vyv9T9yV9Gqf4dTQBeHbVrWmZn4OCQeF0GOQezWe+OSOM4Lhc9wmWRjIwU+VqaOLxEW26C8rGFZ6PpyFb2MXsWFdH4cjsDVyx9W36OzWGTUOL3v7bZL3KYCLNnyNNrJszH1JPUX/dGU7jd4zKQY

Basically the premise is if the group modifier is enabled just bring me the concatanation of price and currency

[mystic helm]

Oh wait do you mean in general? Or just this specific case is not valid

[hardy briar]

https://stackblitz.com/~/github.com/L422Y/nuxt-example-define-model

[hardy briar]

haha check the end of the text 🙂 should be )}

and [item, modifier] should be [item, modifiers]

[hardy briar]

i've put an advanced example in there for you that uses non-mutative modifiers

[mystic helm]

Thank you so much for this i actually understood what i did wrong

Basically i had to use a get instead of a set in order to do the thing which i was trying to do

And it still wouldnt have worked for this specific use case 🤣

So basically a set function is like a computed property which triggers on value change inside the component

And the get function is for initialization

[hardy briar]

get is called when the value is accessed

set is called when something attempts to change the value