CODEWITHSUNDEEP
javascriptvue.jsvue-component
vidgarga
vidgarga

Reputation: 330

Create my own component vuejs, with two diferents parts

I have a component with an input that when clicking opens a modal. When I use this component, and insert it inside a div with relative position, the modal that opens, it does not display well. I would need the html of the modal to be outside the div position relative.

It is important that my component contains both the input and the modal, since this component itself will be used several times within another component.

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

My component would be something like this, more or less:

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

Upvotes: 0

Views: 37

Answers (1)

Juhil Kamothi
Juhil Kamothi

Reputation: 223

I am not sure what's your point for this kind of requirement but anyway there is a workaround you can do with props.

You can have props in "MyOwnComponet" like this. And use that prop value to render accordingly.

Your main component

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

Your (MyOwnComponent)

<template>
 <div v-if="isInput">div-1</div> 
 <div v-else>div-2</div> 
</template>
<script>


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

You can replace div-1 with your input and div-2 with modal.

Upvotes: 1

Related Questions