Failed to resolve directory: confirm

[wmlab03]

Hello,

Can't we use v-confirm directive when referencing your vuejs-dialog.min.js as external resource? Here is jsfiddle:

https://jsfiddle.net/osLfqyn7/

It throws "Failed to resolve directory: confirm" error in the console.

Can you please help?

[Godofbrowser]

Yes you can. window.Vue.use(VuejsDialog.default). Here is an update to the fiddle https://jsfiddle.net/osLfqyn7/1/

[wmlab03]

Hey, Thanks a lot for quick solution. Now here the main issue starts.

Try adding 3 rows by clicking on add row button and then delete the 2nd row. It gets deleted without any issue.

Now if you add one more row & delete the 3rd item (which is now 2nd), then it doesn't get deleted. What can be the reason it is not able to delete the item on 2nd click even if it is confirmed in the dialog?

I have created this fiddle for this issue but struck on the first issue.

[Godofbrowser]

This is not a problem with the plugin, but something to note with vue. When re-rendering templates, vue tries to update only the part that has changed. In this case, it's not fully re-rendering the button component. You'll need to tell vue that each buttons are distinct in every way (includes the button and it's content) by giving them unique keys.

<button :key="row.id" v-confirm="{ok: confirmDelete(row)}" >Delete</button>

now it works as expected: https://jsfiddle.net/osLfqyn7/2/

But without that key, you'll notice the difference when logged (line 23) console.debug(idx, row.id, JSON.stringify(this.rows))

OffTopic: It'll be safer to get the index of the rows by better comparing the object. As seen here https://stackoverflow.com/questions/8668174/indexof-method-in-an-object-array

[wmlab03]

Got your point. Thanks a lot. You saved a lot of my time.

And of-course, your plugin deserves one more star!

[Godofbrowser]

You're welcome. And thanks for starring 👍