[Vue warn]: Property or method "props" 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.
v-slot, activator is not working in my Vue.js code. But I don't know why. I am coping the code from their documentation: https://vuetifyjs.com/en/components/data-tables I am using Vue 2.5.17 version.
v-slot is not supported until Vue v2.6 as seen here:
https://v2.vuejs.org/v2/guide/components-slots.html
So two options:
You could either go back to the slot + slot-scope approach with a Vue version less than 2.6.0.
Or you can upgrade your Vue version to v2.6.0.
Related
I am new to a project and trying to fix some vue bugs. I saw these warnings on my browser:
[vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
[vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
However, the only place I saw that router-link was used didn't include the tag or event props. Here is how the code looks like:
<template v-slot:cell(name)="data">
<router-link :to="`/org/${data.item.orgid}/repo/${data.item.repoid}`">
{{ data.value }}
</router-link>
</template>
Any idea on what this is happening? My vue version is vue#2.6.14. Thanks!
Those warnings are coming from usage of <router-link> in bootstrap-vue package, which hasn't been updated in quite some time.
First of all, they're just warnings. You should only be concerned about them if you planned on upgrading the app to Vue 3.
And if you do plan on upgrading, those warnings are the least of your problems.
One of the biggest would be finding a Vue 3 compatible replacement for bootstrap-vue, with similar functionality. Current attempts are pale, particularly when comparing more complex components, such as tables, dropdowns and form elements.
Notes:
the warning should only be visible in development and should not appear on production builds.
relevant issues: #6373, #6471,
a workaround the problem would be downgrading vue-router to 3.4.9. But I strongly advise against it. IMHO, you should use #^3 (latest stable 3.x version).
there are plans for making bootstrap-vue Vue 3 compatible, but they are currently stalled by Russia's invasion in Ukraine
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 use a web component which extends an existing element using the "is" attribute tag, but vue takes that attribute and converts it into a custom element.
I need vue to still recognize the v-model and business logic, but I also need vue to not change it to a custom component.
Vue turns this:
<textarea v-model="text" is="my-component"></textarea>
into:
<my-component></my-component>
I have tried setting "v-pre" but that keeps vue from tracking the v-model. I have also tried to set ignoredElements, but vue still convert to a custom element. I looked https://github.com/vuejs/vue/issues/2642 and it seems like this is supposed to be a fixed issue, but maybe I am missing something.
Here is a minimal example of what is happening: https://jsfiddle.net/ntkg1xeq/1/
Notice that the textarea turns into real-set in this example.
I would expect vue to disregard the "is" attribute if it does not match any registered components, and to not rewrite the element thus preventing the web component from working.
Is there any way to use vue and web components like this together?
According to the last comment of Web component with "is" attribute not rendered in the view., <textarea v-pre v-model="text" is="my-component"></textarea> would be
render to <textarea is="my-component"> just as your expectation. However, it seems the issue just fixed Vue 1.x ( Vue 1.0.12 example code ), not Vue 2.x ( your example code ).
So. if you want to set is attribute in textarea and make v-model works in Vue 2.x, I thought $refs is another solution ( Vue 2.x example code by using $refs ).
I'm using some syncfusion Vue controls, sometimes the examples on the documentation accesses controls using the $refs and some examples they use raw JavaScript such as getelementbyid. Sometimes if you try to use the $refs then you end up with properties of that control being null or undefined which forces you to use the native JavaScript to access the control. My question is does this go against the principles of Vue as it looks like I'm being forced to access the dom directly, which I've read carefully cause issues with Vue.
Can you specify the following details in which case you were unable to access the property using $refs in Vue.
Vue Component and Property
Vue Environment
Since I've updated to the new Vue 2.1 version I get this message on console:
[Vue warn]: Property or method "_leaving" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in component )
But if try again with Vue 2.0 this warning dissapears.
I do not understand, I'm using the default transitions
Just update again, problem has been fixed: see https://github.com/vuejs/vue/issues/4300