Vue 指令 - 在用户输入 url 后执行 ajax 调用

Question

我有一个自定义的 vue 指令，应该在用户将 url 插入输入字段之后进行 ajax 调用。我有一个问题，我在指令中包含的fetch() 函数在输入 url 时不会被执行。

这是我的模板中的代码：

<template>
<div id="app">
 <input type="search" v-model="url">
 <iframe :v-xframe="url"></iframe>
</div>
</template>

这是我的指令文件中的代码

import Vue from 'vue';

export const xframe = {
    bind(el, binding, vnode) {
        let url = binding.value;
        if( url && url.startsWith('https://www') ) {
            fetch(`https://cors-anywhere.herokuapp.com/${url}`)
            .then( (res) => res.text() )
            .then( (data) => {
                console.log(data);
                let iframeContent = data.replace(/<head([^>]*)>/i, `<head$1>
                    <base href="${url}">
                        <script>
                        // X-Frame-Bypass navigation event handlers
                        document.addEventListener('click', e => {
                            if (frameElement && document.activeElement && document.activeElement.href) {
                                e.preventDefault()                                
                                frameElement.load(document.activeElement.href)
                            }
                        });
                        document.addEventListener('submit', e => {
                            if (frameElement && document.activeElement && document.activeElement.form && document.activeElement.form.action) {
                                e.preventDefault()
                                if (document.activeElement.form.method === 'post') {
                                    frameElement.load(document.activeElement.form.action, {method: 'post', body: new FormData(document.activeElement.form)});
                                }else{
                                    frameElement.load(document.activeElement.form.action + '?' + new URLSearchParams(new FormData(document.activeElement.form)));
                                }
                            }
                        });
                        </\script>`);
                el.srcdoc = iframeContent;
            });
        }
    }         
}

是否有任何解决方案可以在 url 可用后让 fetch 函数开始执行？

Answer 1

您使用了在指令绑定到元素时调用一次的bind(el, binding, vnode) 函数，您将为此使用update(el, binding, vnode) 函数，您可以在 vue 文档中阅读更多信息：https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions