Insight Posts - Answer Overflow

Insight

Explore posts from servers

•Created by Insight on 6/17/2024 in #❓・help

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.

18 replies

NNuxt

•Created by Insight on 4/10/2024 in #❓・help

Pagination files/folder duplicated code between root and pages?

28 replies

NNuxt

•Created by Insight on 3/28/2024 in #❓・help

Filter await useFetch

Hi I am new to Nuxt and all the javascript frameworks out there. I am trying to pull data and then filter it on the page. However when I try to run .filter on questions it comes back stating that questions doesn't have a method named .filter() I see that it returns a Ref<SerializedObject> but how would I get this to work as expected?

<script setup lang="ts">
const { data: questions } = await useFetch('/api/faq')
const searchText = ref("")
const filteredQuestions = computed(() => {
    if (searchText.value == "") {
        return questions;
    }

    const t = searchText.value.toLowerCase();
    return questions.filter(item => {
        return item.question.toLowerCase().includes(t) || item.answer.toLowerCase().includes(t);
    });
})
</script>

<script setup lang="ts">
const { data: questions } = await useFetch('/api/faq')
const searchText = ref("")
const filteredQuestions = computed(() => {
    if (searchText.value == "") {
        return questions;
    }

    const t = searchText.value.toLowerCase();
    return questions.filter(item => {
        return item.question.toLowerCase().includes(t) || item.answer.toLowerCase().includes(t);
    });
})
</script>

8 replies

NNuxt

•Created by Insight on 3/19/2024 in #❓・help

Static Site global object

Hello, I am somewhat new to nuxt. I used nuxt ages ago in v1 but it has been a while. I am trying to make a static site and want to have a yml or json file which contains some basic information like phone number and email and then load it into the page so you only have to change one location if you want update the phone number/email etc. I am currently using Nuxt3.

8 replies

Gaming

Programming