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)
Related
I have written a very simple, learning "hello world" type component, in the vue 2/typescript 4 project at:
https://github.com/sldev2/vr-vtsv-timeline
This project was made with vue ui. I've added #vue/composition-api 1.0.3 and vuetify 2.4.0
The component is called CompositionApiEg.vue. It doesn't use any explicit vuetify styles. When you browse to http://localhost:8080/, It displays 3 names, and allows you to increase "capacity" by clicking the button with text "Increase Capacity". (The button border does not show. I know not why; I assume I need a vuetify button style) There are no runtime errors in the browser.
The CompositionApiEg.vue file is here.
I've tried transplanting this component into another vue2/typescript 4 project also made with vue ui, with the composition-api added, but that has tailwind instead of vuetify. The component was not modified in any way. In particular, no tailwind styles were added.
This project is at: https://github.com/sldev2/v23tstw
Now, however, this component is throwing a bunch of runtime errors, such as:
warning eg:
vue.runtime.esm.js?d04a:619 [Vue warn]: Property or method "spacesLeft" 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.
error eg:
vue.runtime.esm.js?d04a:1897 TypeError: _vm.increaseCapacity is not a function
at click (CompositionApiEg.vue?c6d9:27)
at invokeWithErrorHandling (vue.runtime.esm.js?d04a:1863)
at HTMLButtonElement.invoker (vue.runtime.esm.js?d04a:2188)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?d04a:6961)
Why does the exact same, very simple component succeed in one vue2 project, but not in another?
I am trying to integrate a TinyMCE editor into my Vue application. From the Developer Tools Console I am able to access the tinymce object and manipulate it. For example:
tinymce.activeEditor.selection.setContent('I am a replacement')
The above code will replace the selected text within the TinyMCE editor. I want to work with the tinymce object from within Vue (in multiple components) but I am not sure how to access it. The exact error I get when I enter the above code into a function is: error 'tinymce' is not defined no-undef.
Any help would be much appreciated. Thank you.
Without seeing any code at all it is hard to say exactly why this is happening. Documenting how you are instantiating TinyMCE would help.
Based on the error message I would assume that you are using the TinyMCE Vue component/wrapper to inject TinyMCE into your Vue component. By default that does not actually load the core TinyMCE editor until run-time - and at that time it loads thing via the TinyMCE Cloud server.
The error you are seeing is your linting tool (eslint?) complaining that you are trying to call a variable tinymce but that variable is not defined anywhere.
There are a few ways you could choose to "fix" eslint complaining:
1 - Access tinymce through the global window object:
window.tinymce
2 - Wrap your code with a directive for eslint to not check for undefined variables:
/*eslint-disable no-undef*/
...
/*eslint-enable no-undef*/
https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
3 - Define a global in your .eslintrc file
{
"globals": {
"tinymce": true
}
}
https://eslint.org/docs/user-guide/configuring#specifying-globals
I'm having an issue when using Vuex with Storybook. I have made a little basic app using the Vue CLI and Storybook v5.3 to demonstrate the problem. The code can be found at this repo on github.
Essentially, I'm trying to commit input field data to my store. However, I get a Vuex warn: "Cannot set reactive property on undefined, null, or primitive value: undefined" and a TypeError: "index.js:47 TypeError: Cannot use 'in' operator to search for 'foo' in undefined".
I have no idea why it doesn't work because I'm not really doing anything complex. The only thing I can think of is that Vue and Vuex just don't play well with React which is what Storybook is developed with.
Has anyone come across this before?
Cheers.
I found some issues in the component and store on GitHub. After correcting them I was able to run it without errors.
Firstly, there is no data-index attribute on the <input>. Once this is added, it must be parsed to an integer so it can be used as an array index in the store mutation.
Secondly, the use of Vue.set() is incorrect. The expected arguments are:
An existing reactive object/array.
A property/index that you want to add and be reactive.
The value of the new property/index.
Try changing
Vue.set(state.myData[index], "foo", data);
to
Vue.set(state.myData, index, {"foo": data});
https://v2.vuejs.org/v2/api/#Vue-set
Shouldn't you be using dispatch instead of Vue.set in Vuex? (storeModule.js)
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.
Suddenly I started getting the following TypeError warning from Vue but my app works fine
[Vue warn]: Error in render: "TypeError: Cannot read property 'Name' of null"
This is coming from a data property named 'dashboard' that is loaded via AJAX call after user selects an item from a drop down. In debugging I have been able to simplify the code to get the warning and learned how to not get the warning.
This line will give me the warning but works fine
Dashboard: {{dashboard.Name}}
This line will display the entire dashboard object with no warning
Dashboard: {{ dashboard}}
This line works fine as well with no warning
Dashboard: {{ dashboard == null ? "Null" :dashboard.Name}}
I'm doing my first project with Vue and have had this code in working just fine for a couple of weeks, with no warnings.
Why all of a sudden do I start seeing this warning?
Secondary question is how do you typically track down such warnings. The stack trace is all in Vue code and gives me no idea where the problem originates from in my code.
The Vue team explained this in an answer from their forums here. I'll repeat a shorter version below as it took awhile to get it into my thick head.
A TypeError will be emitted when Vue does its rendering and the state of the data is not yet complete, in my case data was not yet set by the async AJAX call. When the AJAX call does return the data reactivity kicks in and the render is done again and this time the data is in a valid state.
This explains why the below has a TypeError but renders just fine
Dashboard: {{dashboard.Name}}
The TypeError is because Vue is attempting to render null.Name on initial rendering, i.e. dashboard is initially set to null. After the AJAX call returns, dashboard is now set and Vue reactivity kicks in and second rendering works as expected.
This below does not emit the TypeError warning because accessing\rendering null
Dashboard: {{ dashboard}}
is valid with nothing to render so no TypeError, after the AJAX call returns reactivity causes a re-render which displays the data as expected.
Resolution, quoted from the mentioned post.
Generally speaking you would put a conditional render either around your component, or the data that may require that information with a v-if statement to trigger a truthy expression. As null is “false”. When ajax fills it in it becomes “truthy”