I'm using bootstrap-vue:
<b-container fluid="xl">
<h2>Example</h2>
</b-container>
When using a "fluid" prop, Vue.js gives me a warning in the console:
[Vue warning]: Invalid prop: Type check failed for "fluid" prop. Boolean expected, got String with value "xl".
In bootstrap-vue documentation the "fluid" prop is known to be valid.
How to make Vue.js recognize bootstrap props without generating warnings?
I think you are getting this error because you might be using an older version of bootstrap-vue.You should update your bootstrap-vue to 2.2.0 or newer (2.23.1 is the latest at the time of my answer).There might be breaking changes between the version you are using and the newest but it will be better for you in the end and you will be able to use the fluid prop as a string (as stated in the documentation).
v2.2.0 Changelog with mentions to the b-container
update
Initial commit related to this change (the one mentioned in the
changelog)
Latest commit related to this
change
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 this message in the Chrome console since I updated react-admin to version 3.10.0, I tried to dig into the document but can't find any information or example. Anyone encounter this, or luckily any members of react-admin seeing this, please help!
Edit or Create child components must be used inside a <SaveContextProvider>. Relying on props rather than context to get persistence related data and callbacks is deprecated and won't be supported in the next major version of react-admin.
I have a form component, using <SimpleForm>, that is used in <Edit> and <Create> components. There is no warnings when app is running.
But I have the same issue when unit tests are running on the form component. I tried to wrap it inside a <SaveContextProvider> without success... if someone have solution ! 👋
So if you encounter the issue during runtime you should verify that your form component is well wrapped as mentioned in the warning.
In a Vue.js project I am using learning to use Modals from BootstrapVue. In my code I have a file Items.vue with something like this:
<div v-b-modal="'modal-' + query.id"> // this is line 15
...
</div>
<b-modal :id="'modal-' + query.id">
<p class="my-4">
hello
</p>
</b-modal>
It works well. However, Intellij IDEA with the Vue.js plugin keeps beeping with the Warning:
Warning:(15, 5) Attribute v-b-modal is not allowed here
The thread Vue Attribute is not allowed here suggests that this happens with non-.vue files, but it is not the case here.
Replacing v-b-modal="..." with :v-b-modal="..." (that is, with : before the attribute to make the binding more explicit) removes the warning, but then the code does not work.
I am working with Intellij IDEA 2018.1.8.
IDEA version you are using is very old, Vue.js support has been significantly improved since v. 2018.1. In particular, WEB-38028 was fixed in 2019.2. Please consider upgrading IDEA to the most recent version, BootstrapVue directives are correctly recognized there
[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.
I have got Vue App. But I need to to add to it some custom tags, that come from another JS framework. How to prevent Vue to try to interpreted it?
<slider floor="100" ceiling="1000" step="1" ></slider>
Now I am getting error:
Unknown custom element: <slider> - did you register the component correctly?
If you are using Vue Version 2.0
You can use config's ignoredElements
Vue.config.ignoredElements = ['slider']
It is already implemented in Vue 2.0, and will be implemented in Vue 1.1
resource: vuejs issues 3090: Ignore some custom HTML components
This is a warning, not an error, so you should have no issues with it. You can use Vue.config.silent = true to hide all of the warnings. Also I think it would be hidden if you set Vue.config.debug = false. So it is really just a logged warning during development but shouldn't affect production.