Nuxt•5mo ago

ERROR: Invalid assignment target when using a type in ref

I am attempting to use drizzle orm and I have a table and models that look like

export type Account = InferSelectModel<typeof TAccounts> & { createdAt: Date };
export type NewAccount = Omit<Account, 'id' | 'createdAt'>

export type Account = InferSelectModel<typeof TAccounts> & { createdAt: Date };
export type NewAccount = Omit<Account, 'id' | 'createdAt'>

In a component for a form for NewAccount I have const form = ref<NewAccount>(); and when I try to map that using v-model in the html of the page like below.

      <input
            v-model="form?.name"
            type="text"
            placeholder="Enter account name"
          />

      <input
            v-model="form?.name"
            type="text"
            placeholder="Enter account name"
          />

I get the error:

[plugin:vite:vue] Transform failed with 1 error:
<project>/components/Form/NewAccount.vue:38:67: ERROR: Invalid assignment target

36 |    return (_openBlock(), _createElementBlock("div", _hoisted_1, [
37 |      _withDirectives(_createElementVNode("input", {
38 |        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.form?.name) = $event)),
   |

[plugin:vite:vue] Transform failed with 1 error:
<project>/components/Form/NewAccount.vue:38:67: ERROR: Invalid assignment target

36 |    return (_openBlock(), _createElementBlock("div", _hoisted_1, [
37 |      _withDirectives(_createElementVNode("input", {
38 |        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.form?.name) = $event)),
   |

I have tried using reactive and make things work but no matter what I do it doesn't work. Even if I take the drizzle orm out of it like

type Test = {
  name: string;
  age: number;
};

const form  = ref<Test>();

type Test = {
  name: string;
  age: number;
};

const form  = ref<Test>();

the same error occurs.

10 Replies

Ferrington•5mo ago

v-model requires a valid ref target. In your example, form is of type Ref<Test | undefined>. Initializing a value would solve your problem:

const form = ref<Test>({name: '', age: 0});

const form = ref<Test>({name: '', age: 0});

InsightOP•5mo ago

ive done that too, same issue. Sorry should have stated that. I changed it to:

type Test = {
  name: string;
  age: number;
};

const form  = ref<Test>({
  name: '',
  age: 0
});

type Test = {
  name: string;
  age: number;
};

const form  = ref<Test>({
  name: '',
  age: 0
});

with the same html as above and the same error comes up

Ferrington•5mo ago

Unfortunately I can't reproduce. That exact code works fine on my machine

InsightOP•5mo ago

hm okay I will see if I can get it to repro in a new project although, you are running the project right? The error only shows up when trying to load the page itself no errors show up in the intellisense or code itself

Ferrington•5mo ago

Yeah I have it working in the browser. No errors Silly question, but have you tried restarting your dev server? Sometimes it gets messed up by certain project changes

InsightOP•5mo ago

Yes I have, I have created a stackblitz with the error occurring. Hopefully it can give you a better idea of the issue and possibly how to fix it. https://stackblitz.com/edit/nuxt-starter-tygvdb?file=pages%2Findex.vue

Lucas

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Ferrington•5mo ago

Oh, the issue is the question mark form?.name. I assume you had it there because originally you had a possibly undefined form.name. After initializing your ref, I removed the question mark in my reproduction because form.name always exists.

InsightOP•5mo ago

ah. interesting. I could have sworn I tested removing those but I might have done it at a point where the object wasn't defined in the ref. is there any particular reason why

ref<NewAccount>();

ref<NewAccount>();

wouldn't just default to the default object? So you don't have to re-specify all the properties etc. either way thanks for the help!

Ferrington•5mo ago

I think that would be unexpected behavior for a lot of use cases Default values would need to be generated somehow

InsightOP•5mo ago

I come from c# so passing in the types like that are a lot more common. Not a big deal, was just curious.

Gaming

Programming

ERROR: Invalid assignment target when using a type in ref