I am using popover from Bootstrap-Vue, and I get this error:
[BootstrapVue warn]: popover - Unable to find target element in
document.
Everything work just fine, but I have a lot of warnings and I want to fix them.
Parent Component
<template>
<popover />
<label id="popover-target-EXAMPLE">
<i class="far fa-question-circle"></i> Parish
</label>
</template>
<script>
import Popover from './Popover';
export default {
components:{
Popover,
}
}
</script>
My popover Child Component
<template>
<div>
<b-popover target="popover-target-EXAMPLE" variant="primary" triggers="hover" placement="top">
<p class="popover-style">TEXT</p>
</b-popover>
//here are multiple <b-popover>....
</div>
<template>
Try to put the popover component after the targeted element
After some time I found out the problem.
In that Popover child I had multiple popovers, and some of them are not in parent component.
So to fix the warnings I removed all <b-popover> that don't have an ID in parent component.
Related
Could someone kindly advise me what I am doing wrong here?
I am using BootstrapVue to create radio buttons, in second image. In spite of I even didn't declare “checked” prop, still getting the error, in first image, for every buttons and also every form-groups in the project.
<template>
<div>
<b-form-group
label-cols="auto"
label="Peer Groups:"
class="pg-button-group"
label-class="text-primary"
label-size="sm"
v-if="peerGroups"
>
<b-form-radio-group
v-model="selectedPg"
:options="peerGroups"
button-variant="primary"
#change="pgSelectedByClick"
buttons
size="sm"
class=""
>
</b-form-radio-group>
</b-form-group>
</div>
</template>
The Error I got:
Buttons which I try to create:
I basically import 2-3 components in a parent component and based on the button clicks I simply hide and show some components. In every component I have Back and Next buttons, when they clicked, I show different components in different situations. Here's a simple example of one my components;
<template>
<div>
<transition name="fade" appear>
<div class="justify-center">
<form #submit.prevent="submitFormTest" v-if="!back && !configuration">
Bunch of code here is irrelevant with my question...
<!-- Buttons -->
<div class="text-center mt-4">
<button #click="back = true" class="btn-w-orange mr-2" type="button">Back</button>
<button #click="nextButton" class="btn-w-orange" type="button">Next</button>
</div>
</form>
<modalOpMode v-if="back"></modalOpMode>
<modalConnection v-if="configuration && !back"></modalConnection >
</div>
</transition>
</div>
</template>
and here is my script;
<script>
import modalConnection from "./modalConnection";
import modalOpMode from "./modalOpMode "
export default {
data(){
return {
configuration: false,
back: false
}
},
components: {
modalOpMode,
modalConnection,
},
methods: {
nextButton(){
this.configuration = true;
},
},
}
</script>
I statically imported two other components to display when back and next button is clicked. Everything is okay when I go for Next button for ALL MY COMPONENTS. (There are other components that I get the same error.). But the problem occurs when I click the back button. When Next is clicked, the form is hidden and modalConnection is visible as it should but when Back is clicked, I only see a blank page because the modalOpMode gives me the following error;
[Vue warn]: Unknown custom element: <modalOpMode> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I'm pretty sure that I import the component in the correct way, the path, the component name, the usage, everything is normal because I do that with the other one modalConnection and that one works all good. If you want to check my modalOpMode component, here it is;
<template>
<transition name="fade" appear>
<div>
<form #submit.prevent="submitFormTest" v-if="configuration == ''">
There are four radio buttons that bound with v-model to change the value of configuration variable
</form>
<!-- Modal Comp1-->
<modalComp1 v-if="configuration == 'comp1'"></modalComp1>
<!-- Modal Comp2 -->
<modalComp2 v-if="configuration == 'comp2'"></modalComp2>
<!-- Modal Comp3-->
<modalComp3 v-if="configuration == 'comp3'"></modalComp3>
<!-- Modal Comp4 -->
<modalComp4 v-if="configuration == 'comp4'"></modalComp4 >
</div>
</transition>
</template>
In here I imported 4 other components and bound them to a variable called configuration. When the variable is equal to something like comp1 or comp2 as above, I simply display the relevant component and hide the other content.
As I said before, when I click the next button and show the components, it's all good, but I can't go back, it gives me the above error. What am I doing wrong or what am I missing here? Thanks in advance
In Components you have modalOperatingMode instead of modalOpMode
Versions
nuxt: ^2.14.12
node: v14.15.4
Reproduction
Hello everyone and thank you in advance.
I have a strange issue that I don't really understand what's the problem and how to deal with it.
I have installed a fresh nuxt ssr project.
I'm getting the following warning
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
I have three simple components: Form, Input, Button.
Form.vue
<template>
<form v-bind="$attrs" class="w-full" #submit.prevent="$emit('submitted')">
<div class="space-y-2 mb-4">
<slot name="fields" />
</div>
<slot name="button" />
</div>
</form>
</template>
<script>
export default {
computed: {
hasFields() {
return !!this.$slots.fields
},
},
}
</script>
Input.vue
<template>
<div class="relative w-full">
<input class="form-input block w-full" />
</div>
</template>
<script>
export default {
inheritAttrs: false,
}
</script>
Button.vue
<template>
<button
type="submit"
class="relative btn inline-flex items-center justify-center transition ease-in-out duration-150"
>
Save
</button>
</template>
<script>
export default {}
</script>
I use my components in pages/index.vue like this:
<template>
<div>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
</div>
</template>
<script>
export default {}
</script>
If i use the Form component only once in the view i don't get the warning.
If i use it twice i get it.
Steps to reproduce
Reproduction link
Install a fresh nuxt ssr project.
Create the components as in the reproduction link
What is Expected?
All the components to render normally without any warnings or errors.
What is actually happening?
I get the following warning.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Some extra notes
I know that wrapping the whole thing inside a <client-only> fixes the problem but i want to understand why is this happening in order to avoid it in future cases.
Also if I remove components: true from nuxt.config.js and import the components normally again the warning is gone.
Changing the name of the components eg Button -> TheButton won't fix the problem. You can see the reproduction here.
<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'
export default {
components: { Form, Button, Input}
}
</script>
There seems to be one or more components which are not supported in "Universal" Mode, i.e. they might have code which isn't being executed correctly on server end.
Please try finding that component which you think can cause an issue and wrap that component with .
Here's the link for more information: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
I know that there are similar questions with jquery, but this is related to vue.js
I'm using uiv which is a boostrap version for vue.js. Checking the docs I'm trying to trigger manually the popover using trigger="manual" with a hover event:
<popover title="Title" v-model="show">
Toggle Popover
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
<script>
export default {
data () {
return {
show: false
}
}
}
</script>
Well, I understand why the popover is being closed due when I leave the button I set show to false.
So my question is: Where do I have to place that #mouseleave event in order to prevent closing the popover when it is being hovered?
Here I have a plunker link: https://plnkr.co/edit/gTsOJE4k8fQUMcMUpqS6?p=preview
I've solved my problem doing this:
<popover trigger="hover" title="Title">
<a href="#" #click.prevent>Toggle Popover</a>
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
Basically, we can use trigger="hover" to prevent closing the popover when it is being hovered.
Take a look at this example: https://plnkr.co/edit/RSjhazfxqBhaNqcKijXe?p=preview
As per example given in aurelia documentation I am opening dialog box with viewmodel (say prompt ). This prompt has view inside in which I am adding "router-view" tag.
My routes are already configured. So when first time I open dialog it opens correct views as configured in routes and everything works well. But when I close dialog and re-opens dialog, It's not showing first route view. If I click other route link and come back to first route it works.
I have observed it's not creating instance of view model of first route( when opened dialog second time).
How to fix this issue?
Prompt html
<template><div class="row">
<left-menu ></left-menu>
<router-view></router-view>
</div></template>
<template>
and left-menu.htm
<template>
<div class="list-group">
<template repeat.for="item of items">
<a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
</template>
</div>
Using a router inside a modal window seems off to me. The router is used to manage pages, but a modal is used to manage content within a page.
I would suggest building a modal window component, you can use <slot> tags to inject content and set it's model bindings to any data within the current view model.
Here's an example of my component that I use for this.
<template>
<div show.bind="visibility" class="modal-window">
<div>
<button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
</div>
<slot></slot>
</div>
<div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>
-
import { bindable } from 'aurelia-framework';
export class ModalContent {
#bindable visibility: boolean;
close(){
this.visibility = false;
}
}
<modal-content id.bind="'add-variant-window'">
<h4>Modal Content</h4>
<div>you can bind this to things on the current viewmodel</div>
</modal-content>