v-modal | Simple , flexible and beautiful modal dialogs in AngularJS | Frontend Framework library

There are many problems in your code and i will list them one by one.

• data property should be a function.
• fullname , mobile , ... are bound to input type="text" so empty string is better for initial value.
• there are typos in your v-modal
• there is a mistake in your logical formula for isDisabled

so the final code should be like this:

There is a typo in your autocomplete:

Change this v-modal="newRole" -> v-model="newRole"

I guess that's it.

The issue is that Vue is trying to reuse your modal on page 1, to save how much it has to re-render.

The root of your issue is that inside the modal component, you set this.customer to this.selectedCustomer in the create hook and no where else. Since the create doesn't run again on page 2, it wont update this.customer meaning the ID will still match the rows from page 1.

In the long term it might be a good idea for for you to rethink that logic.

But you should be able to solve the issue by adding :key="data.item.id" to the customer-modal, which forces Vue to re-render the modal when the id updates. So it can't try to reuse the modals across the pages.

I have some approaches that you can try to get what you want finally working.

1. Make sure whether you import Bootstrap and BootstrapVue CSS files:

You misspelled v-model in , it should be

Consider using spaces, or use word-wrap:break-word

Due to the upcoming changes in HTML 5.1 (where we don't know if multiple H1s will still be valid and where within HTML) I always recommend one

This makes the answer in your circumstances to use a

I recommend this as your modal sits outside of the flow of the rest of the document and so it logically should be a 'top level' heading level.

The only exception to this is if your modal is within the flow of your document, at that point it would probably be best to use an appropriate level that fits with it's position in the document flow.

Although I am not sure why anyone would want a modal within the flow of the document as that is not a good practice in the first place.

One method is using events, the other is using 2-way binding.

When you submit the form, the associated event fires a method (@submit.prevent="getValues"). Inside this method you read the value of name and set the lastName property to equal it.

When you do v-model="firstName" Vue sets up 2-way binding between the input field value and the firstName property.

You see the difference in that when you type into the input box, it immediately updates the property. Behind the scenes Vue is handling the change event, and updating the property. Equally, if you modified the data property some other way, the value in the input box would also update.

There's also a 3rd option of 'simple' binding. This is achieved by using the v-bind tag. This will do the updating of the data property in the same way, but won't modify the input box value 'in reverse' if changed elsewhere.

For that you need to use javascript ( or jQuery in my example ) .

First, you need an overlay. I created a div with class .overlay , fixed, full height and width with red background and opacity

Second, you need to position your menu . I positioned in center ( vertically and horizontally ). ( in below 991px media query )

Third, with a little bit of jQuery i made the effect you wanted. You can change/style the code as you please. But what i made for you should be more than enough to help you achieve exactly what you want

Fourth, here on Stack Overflow we don't make free code. We just help you make your code functional. You should try and research more on a subject before posting here for help

See jsFIddle or snippet below