Insight Comments - Answer Overflow

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

18 replies

NNuxt

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

ERROR: Invalid assignment target when using a type in ref

no errors show up in the intellisense or code itself

18 replies

NNuxt

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

ERROR: Invalid assignment target when using a type in ref

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

18 replies

NNuxt

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

ERROR: Invalid assignment target when using a type in ref

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

18 replies

NNuxt

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

ERROR: Invalid assignment target when using a type in ref

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

18 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

haven't even really gotten into state or using database or user authentication...

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

huh interesting. so much to learn and remember lol. Thanks for all your help! I appreciate it

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

@pyplacca I got it working, however I am running into a situation where I have to call refreshNuxtData() here is the code. Is ther a way to make it refresh with out using that? Or is that expected to be used in a situation like this?

<script setup lang="ts">
const pageSize = 1;
const page = computed(() => +(useRoute().query.page || 1));

const route = useRoute();
const count = await queryContent('/blog').sort({ _path: -1 }).count()
const { data } = await useAsyncData(() => queryContent('/blog').limit(pageSize).skip((page.value - 1) * pageSize).sort({ _path: -1 }).find());



async function goToPage(n: number) {

    if(n == 1){
        navigateTo(`/blog`, { replace: true });
    } else {
        navigateTo(`?page=${n}`, { replace: true });
    }

    
    const data = await queryContent('/blog').limit(pageSize).skip((n - 1) * pageSize).sort({ _path: -1 }).find();
    refreshNuxtData();
}
</script>

<template>

<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div class="flex gap-6">
            <div class="flex-1 p-6 bg-white shadow-md dark:bg-slate-800 rounded-xl">

                <BlogArticleList :articles="data" />
                
                <Pagination :page="page" :perPage="pageSize" :total="count" @changePage="goToPage"  />
            </div>
            <div class="flex-none w-4/12 p-6 bg-white shadow-md dark:bg-slate-800 rounded-xl">
                <BlogTag v-for="(value, key) in tagsArray" :href="'/blog/tag/' + encodeURIComponent(value.name)"
                    :tag="value" />
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
const pageSize = 1;
const page = computed(() => +(useRoute().query.page || 1));

const route = useRoute();
const count = await queryContent('/blog').sort({ _path: -1 }).count()
const { data } = await useAsyncData(() => queryContent('/blog').limit(pageSize).skip((page.value - 1) * pageSize).sort({ _path: -1 }).find());



async function goToPage(n: number) {

    if(n == 1){
        navigateTo(`/blog`, { replace: true });
    } else {
        navigateTo(`?page=${n}`, { replace: true });
    }

    
    const data = await queryContent('/blog').limit(pageSize).skip((n - 1) * pageSize).sort({ _path: -1 }).find();
    refreshNuxtData();
}
</script>

<template>

<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div class="flex gap-6">
            <div class="flex-1 p-6 bg-white shadow-md dark:bg-slate-800 rounded-xl">

                <BlogArticleList :articles="data" />
                
                <Pagination :page="page" :perPage="pageSize" :total="count" @changePage="goToPage"  />
            </div>
            <div class="flex-none w-4/12 p-6 bg-white shadow-md dark:bg-slate-800 rounded-xl">
                <BlogTag v-for="(value, key) in tagsArray" :href="'/blog/tag/' + encodeURIComponent(value.name)"
                    :tag="value" />
            </div>
        </div>
    </div>

</template>

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

Thanks! I haven't been able to get to this just yet... I have been so busy... I plan to give it a try soon though!

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

intersting, so 2 questions from that. 1. the goToPage doesn't appear to change the actual url itself, is it supposed to? 2. First time seeing the +() from a quick search is it just trying to turn it into a number?

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

but all the stuff I have seen is to use the folders and slugs for things like the pages of blog posts

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

I have that, the index you see at the bottom is inside the blog folder.

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

I come from c# land with asp.net so lots of the stuff in js/typescript is new to me

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

Would you happen to have an example of what that would look like? That is what I was initially thinking but everthing I found showed it set up like I have it in my initial post

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

Just basing things off tutorials I have seen

28 replies

NNuxt

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

Pagination files/folder duplicated code between root and pages?

What would be considered more standard? I am somewhat new to nuxt so trying to do things in a way that make most sense

28 replies

Gaming

Programming