Fix(directive): respond to updated directive value

Author: Godofbrowser

src/plugin/directive.dialog.ts

@@ -3,13 +3,16 @@ import {CONFIRM_TYPES, DIRECTIVE_ATTRIBUTE_KEY} from './constants'
 
 
 const DirectiveDialog = function (app) {
+    this.shouldIgnoreClick = false
+    this.bindingOptions = {
+
+    }
+
     Object.defineProperties(this, {
         app: { get: () => app },
     })
 }
 
-DirectiveDialog.prototype.shouldIgnoreClick = false
-
 DirectiveDialog.prototype.getConfirmMessage = function (binding) {
     if (binding.value && binding.value.message) {
         return binding.value.message
@@ -70,15 +73,20 @@ DirectiveDialog.prototype.clickHandler = function (event, el, binding) {
 
 DirectiveDialog.prototype.defineConfirm = function () {
     type BindFn = (el: unknown, binding: unknown) => void
-    const DirectiveDefinition: {mounted: BindFn, unmounted: BindFn} = {
+    type UpdateFn = (el: unknown, binding: unknown, vnode: unknown, prevVnode: unknown) => void
+    const DirectiveDefinition: {mounted: BindFn, unmounted: BindFn, updated: UpdateFn} = {
         mounted: (el, binding) => {
             el[DIRECTIVE_ATTRIBUTE_KEY] = el[DIRECTIVE_ATTRIBUTE_KEY] || {}
-
             el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler = event => this.clickHandler(event, el, binding)
 
             el.addEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
         },
-        unmounted(el) {
+        updated: (el, binding, vnode, prevVnode) => {
+            el.removeEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
+            el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler = event => this.clickHandler(event, el, binding)
+            el.addEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
+        },
+        unmounted: (el) => {
             el.removeEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
             delete el[DIRECTIVE_ATTRIBUTE_KEY]
         }

src/plugin/index.ts

@@ -11,8 +11,8 @@ interface DialogPluginOptions extends Omit<DialogWindowOptionsInterface, 'id'>{}
 
 const DialogPlugin = {
     install(app: App, options: DialogPluginOptions) {
-        const DirectivesObj = new DirectiveDialog(app)
-        app.directive('confirm', DirectivesObj.defineConfirm())
+        const DirectivesInstance = new DirectiveDialog(app)
+        app.directive('confirm', DirectivesInstance.defineConfirm())
 
         const dialog = new PromiseDialog(app, options)
 

src/views/IndexView.vue

@@ -12,13 +12,13 @@
     <hr style="margin: 35px 0;" />
     <div style="width: 100%;display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 200px);justify-content: center">
       <button class="dg-btn" v-confirm="'Please confirm!'">Click Directive</button>
-      <a href="https://example.com" v-confirm:soft="'Visit external link?'">Example website</a>
+      <a href="https://example.com" v-confirm:soft="message.visitExternal">Example website</a>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, nextTick, ref} from "vue";
 
 export default defineComponent({
   methods: {
@@ -79,6 +79,21 @@ export default defineComponent({
             console.log('Prompt dismissed');
           });
     },
+  },
+  setup() {
+    const message = ref({
+      visitExternal: 'Visit external link?'
+    })
+    setTimeout(() => {
+      message.value = {
+        visitExternal: 'Visit this external link?'
+      }
+      nextTick(() => {
+        console.log('#'.repeat(45), '[message.value.visitExternal]', message.value.visitExternal)
+      })
+    }, 5000)
+
+    return { message }
   }
 })