So this was largely a test. In normal Vue, you'd get the line number of where the error went wrong, but it seems like Nuxt is quite general about that, and just tells you the file only, without the line number. Is it possible to add it back in with some settings?
I just have a simple page set up:
pages/example.vue
<template>
<div>
I am example {{ something }}
<nuxt-child/>
</div>
</template>
warning:
[Vue warn]: Property or method "something" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/example.vue> at pages/example.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
It's not possible to get the line number from this warning message.
The Vue template compiler does not generate source maps, so it would be impossible to get the original line number.
Looks like it is planned for v3, though.
Related
I always get this error when working with v-for. It was not a problem before, but I don't like it because I started using it a lot in my project.
Why does Visual Studio Code give an error when working with vue js, even though I have written the codes correctly?
received error;
[vue/valid-v-for]
Custom elements in iteration require 'v-bind:key' directives.eslint-plugin-vue
You need to provide key in the v-for tag.
<app-card v-for="item in cards" :key="item.id"></app-card>
or
<app-card v-for="(item,index) in cards" :key="index"></app-card>
As error saying itself, :key directive is missing as it should be there while working with v-for.
You don't need a key attribute in order to use v-for, but it's a good practice, that's why editor intelligence is telling you to add.
Please have a read of the official documentation of vue.js regarding maintaining state while using v-for.
For example {{ window }} template gives out a [Vue warn]: Property or method "window" is not defined
Is this intended behaviour? If I understand correctly adding window to the Vue data would be a bad idea.
Yes, this is intended behaviour. The Template is "scoped" to the component instance, and there are only a few exceptions made - {{ Math.random() }} works, for example.
The window object as the global object is not something templates should directly interact with.
If you need to, use a method to get what you need.
I struggle to understand the component and template system in VueJS. I downloaded the VuetifyJS PWA example template and tried to replace the complete content of Hello.vue with the content of the VuetifyJS google-contacts.vue example template.
I got this error message after npm run dev on localhost:8080:
> vue.esm.js?65d7:578 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Hello> at /home/a/my-project/src/components/Hello.vue
<App> at /home/a/my-project/src/App.vue
<Root>
Why is it not possible to just replace the <template></template> content and what do I need to change to use the google-contacts.vue template content instead of the Hello.vue content?
I just followed the process and it works ok for me, so I'm guessing it's most likely a miss-step in your build, but so far can't reproduce it.
Note, it looks like docs/examples/layouts/google-contacts.vue is a replacement for the overall page layout rather than an individual component (thinking along the lines #B.Fleming mentions in comments), so it's more appropriate to replace App.vue than Hello.vue.
This is what I originally did (not reading your post thoroughly). But subsequently replacing Hello.vue gives me the same working Google Contacts page.
I'm using the vue-js-toggle-button plugin available at https://www.npmjs.com/package/vue-js-toggle-button.
I've installed the plugin in my main.js file like so:
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
The plugin works fine when I use it in one of my main components, but when I use it in a child component I receive a warning:
[Vue warn]: Unknown custom element: <toggle-button> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
I only receive this error when trying to use the plugin from a child component.
So for example, in my Child.vue file I might have this:
<toggle-button />
My Parent.vue file includes the child
<child/>
Anyone have an idea what's going on here?
I also want to point out that the plugin still works in the child component, but this warning is showing up in the console. I just want to get rid of the warning.
The child file basically looks like this:
<template lang="html"><div>
<toggle-button id="control-toggle-pg"
:labels="{checked: 'PG', unchecked: 'VG'}"
:color="{checked: '#333', unchecked: '#999'}"
:value="isPG" :sync="true"></toggle-button>
</div></template>
Not that big a deal, but it makes my testing a little ugly. I'm using Vuelidate to handle my data validating, and even though there's no errors in the console for the rendered component I'm testing, my Karma testing is full of these:
ERROR LOG: '[Vue warn]: Property or method "$v" is not defined on the
instance but referenced during render Make sure to declare reactive
data properties in the data option. (found in <Root>).'
Everything still runs, I'd just like to clean up the error.
Add this intro your test file:
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)