Nuxt•2y 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'>

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

NewAccount

NewAccount

NewAccount I have

const form = ref<NewAccount>();

const form = ref<NewAccount>();

const form = ref<NewAccount>();

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

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

[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

reactive

reactive

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>();

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

const form  = ref<Test>();

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

const form  = ref<Test>();

the same error occurs.

Ferrington•6/17/24, 5:26 PM

v-model requires a valid ref target. In your example,

form

form

is of type Ref<Test | undefined>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•6/17/24, 5:31 PM

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•6/17/24, 5:36 PM

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

InsightOP•6/17/24, 5:37 PM

hm okay I will see if I can get it to repro in a new project

InsightOP•6/17/24, 5:38 PM

although, you are running the project right? The error only shows up when trying to load the page itself

InsightOP•6/17/24, 5:38 PM

no errors show up in the intellisense or code itself

Ferrington•6/17/24, 5:39 PM

Yeah I have it working in the browser. No errors

Ferrington•6/17/24, 5:40 PM

Silly question, but have you tried restarting your dev server? Sometimes it gets messed up by certain project changes

InsightOP•6/17/24, 5:47 PM

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

StackBlitzLucas

Nuxt - Starter (forked) - StackBlitz

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

Ferrington•6/17/24, 5:50 PM

Oh, the issue is the question mark

Ferrington•6/17/24, 5:51 PM

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

InsightOP•6/17/24, 5:53 PM

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.

InsightOP•6/17/24, 5:54 PM

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.

InsightOP•6/17/24, 5:55 PM

either way thanks for the help!

IInsight is there any particular reason why ```ts ref<NewAccount>(); ``` wouldn't just ...

Ferrington•6/17/24, 5:57 PM

I think that would be unexpected behavior for a lot of use cases

Ferrington•6/17/24, 5:58 PM

Default values would need to be generated somehow

InsightOP•6/17/24, 5:58 PM

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