Develop a custom Vue.js component consisting of two distinct sections

Question

Develop a custom Vue.js component consisting of two distinct sections

I am experiencing an issue with a component that has an input which, when clicked, opens a modal. The problem arises when I place this component inside a div with a relative position - the modal does not display correctly. To resolve this, I need to ensure that the HTML for the modal is placed outside of the div with a relative position.

It is crucial that my component includes both the input and the modal, as it will be used multiple times within another component.

<div class="position-relative">
    <MyOwnComponet />
</div>
<div class="position-relative">
    <MyOwnComponet />
</div>

The structure of my component would look something like this:

<template>
    <input @click="showModal = true" />
    <div class="modal" v-if="showModal">
       ...
    </div>
</template>

javascript vue.js vue-component

Answer 1

Answer №1

I'm not sure why you need this specific requirement, but there is a workaround using props that might work for you.

In your "MyOwnComponent," you can define props and use their values to render content accordingly.

Here's an example of how you can set up your main component:

<div class="position-relative">
    <MyOwnComponet :isInput="true" />
</div>
<div class="position-relative">
    <MyOwnComponet :isInput="false" />
</div>

And here's what your MyOwnComponent could look like:

<template>
 <div v-if="isInput">input</div> 
 <div v-else>modal</div> 
</template>
<script>


export default {
  props: {
    isInput : Boolean,
  },
  data() {
  }
};
</script>

You can customize the content inside the div tags as needed for your application.

Answer 2

I'm not sure why you need this specific requirement, but there is a workaround using props that might work for you.

In your "MyOwnComponent," you can define props and use their values to render content accordingly.

Here's an example of how you can set up your main component:

<div class="position-relative">
    <MyOwnComponet :isInput="true" />
</div>
<div class="position-relative">
    <MyOwnComponet :isInput="false" />
</div>

And here's what your MyOwnComponent could look like:

<template>
 <div v-if="isInput">input</div> 
 <div v-else>modal</div> 
</template>
<script>


export default {
  props: {
    isInput : Boolean,
  },
  data() {
  }
};
</script>

You can customize the content inside the div tags as needed for your application.

Develop a custom Vue.js component consisting of two distinct sections

Answer №1

Similar questions

combine a single file as the initial step in gulp

Facing an issue with promises: Attempting to encapsulate mysql queries for use with NodeJS/Express

Ready to Opt-Out in RxJS 6?

Choose all from the list of categories

Use jQuery to dynamically capture and store the value of data-rowindex into an array

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Tips for showcasing several images with accompanying content once the webpage has finished loading

Issue: Unhandled TypeError: Problem detected when calling storage.set(object items, optional function callback) in a Chrome Extension

Using pure JavaScript, implement a transition effect that changes an element's display from

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

Passing on rotational values from a parent Object3D to its child - the magic of three.js

Synchronizing jQuery parameters

Issue with the loading order of jQuery in Internet Explorer 9

Activate the active class on the icon when hovering over a dynamically generated span using Vue

What causes addEventListener to not return a value?

Incorporating a new data series into your candlestick chart with Highstock

Transmit the image produced by the frontend JavaScript

The absence of variable declaration in a 'for...of' loop is functional in .js files but does not work in

Can you generate an image of text using unique unicode characters?