Warning [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance

Ionic Framework Ionic Vue
1

image
image1174×144 6.3 KB

Expected behavior:
Routing causes vue warning on the console. Don’t how to troubleshoot the problem. Code is working but got a warning

Related code:
When routing is click, vue warning error occured.

<core-footer 
      message="Already got an account?" 
      text="Login" 
      link="/auth/login"
    />

<ion-row class="ion-text-center ion-justify-content-center">
    <ion-col size="12">
            <p >{{$props.message}} 
                        <span @click="() => router.push($props.link)" class="custom-link">{{text}}  &rarr;</span>
            </p>
                
    <ion-col>
</ion-row>
2

Could you show me the entire component of the core-footer pls?

Did you bind some props on the core footer?

1 Like
3

@whitersun Here it is

<template>
    <ion-footer>
        <ion-grid>
           
            <ion-row class="ion-text-center ion-justify-content-center">
                <ion-col size="12">
                    <p >{{$props.message}} 
                        <span @click="() => router.push($props.link)" class="custom-link">{{text}}  &rarr;</span>
                    </p>
                </ion-col>
                <ion-col>
                    
                </ion-col>
            </ion-row>
        </ion-grid>
         <svg style="margin-bottom:-0.5rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#7a506f" fill-opacity="1" d="M0,288L40,277.3C80,267,160,245,240,224C320,203,400,181,480,176C560,171,640,181,720,181.3C800,181,880,171,960,144C1040,117,1120,75,1200,58.7C1280,43,1360,53,1400,58.7L1440,64L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
    
    </ion-footer>
   
</template>

<script lang='ts'>
import { defineComponent, onMounted } from 'vue'
import {  
    IonFooter,
    IonGrid, IonCol, IonRow, 
} from '@ionic/vue';
import { useRouter } from 'vue-router';
export default defineComponent({
    components: {
        IonFooter, 
        IonGrid, IonCol, IonRow, 

    },
    props: {
        message: {
            type: String,
            required: true
        },
        text: {
            type: String,
            required: true
        },

        link: {
            type: String,
            required: true
        },

    },
    setup () {
        const router = useRouter();
        onMounted(()=> {
            console.log('Footer Component')
        })

        
        return { router };
    }
})
</script>

<style scoped lang="scss">
ion-footer {
    ion-toolbar {
        --background: #7c3b6a;
        color: white;
        text-align: center;
    }
}
</style>
4

Hi, try using like this:

props: ['message', 'text', 'link']

Of course, u also able to use like this if have some case we must do:

    props: {
        message: {
            type: String,
            required: true
        },
        text: {
            type: String,
            required: true
        },

        link: {
            type: String,
            required: true
        },

    },

and when u bind props, try to remove dollar site ( “$” ) and props, just like this: {{ message }} or maybe {{ link }}
The reason is you are using props inside a component not outside or bind something and ionic combine FW is vue 3 not vue 2 :))

outside component or in father Component bind the element like you key on core-footer component

5

Thanks, I tried but it’s not working on the above suggestion

6

That is work for me, Could you check again on you component where bind the props place, that shouldn’t have $props.

It should be like that {{ message }}, {{ link }}. Not like this {{ $props.message }}, {{ $props.link }}

and in you component name bind in Father Component should be like this:
<core-footer :message="Hello world" :link="/path" />

7

Yes code works but error still exists :frowning:

8

could u show the errors and entire core-footer component and father component? or may you have github?

9

Maybe in you core-footer component have some stuck I dont know why did you key for, that may make you component be complex and stuck together…

10

@whitersun here it is mate. Thanks
donPuerto/ionicvueV5-login-register-form-validation-appv1 (github.com)

11

Chiming in quickly here to add my experience. I had a very difficult time tracking down exactly why this was happening in my app, as it didn’t print any error that I could trace back to actual events in the HTML.

I used Vuex useStore() from a plain Typescript file, imported into a Vue component. I didn’t remember reading that useStore() could only be called from inside of setup() in a Vue component.

12

Hi @donpuerto, I don’t see where your component has a named core-footer in Github. Do you make sure you push it up to GitHub?

13

@whitersun The repo is reuploaded to Github.

Thanks for checking.

14

You close… did you set your Github private?

image
image1329×544 95.9 KB

15

Opps, @whitersun sorry mate

16

I saw your project on Footer.vue bind to Home.vue is work totally fine. In your home project is already shows up which has your text in that component. Compile and check on the browser is totally ok.

So I think before You upload GitHub here, You already solved the problem…