Question

我有一个textarea，每当按下空格键时就会触发一个函数，该函数会检查输入的文本的最后“位”是否为url，是否为它在下面创建预览并删除“ bit”输入中的文本，效果很好，但是现在我也希望每当用户向其中粘贴一些东西时都触发该函数，问题是输入是通过v模型链接到数据中的post.description的，但是，当@paste调用函数时，数据post.description为空，但是通过按空格键触发了相同的函数，即已填充数据... 这是html：

<div id="post-share" class="form-group">
                      <textarea
                        id="post-description"
                        class="form-control"
                        name="post-description"
                        cols="40"
                        rows="5"
                        @keyup.space="checkUrl"
                        @paste="checkUrl"
                        v-model="post.description"
                      ></textarea>

这是函数：

   checkUrl() {
      if (this.post.video_link === "") {
        console.log("entro 1");
        let link = [];
        const regex = /((?:https?:|www\.)[^\s]+)/g;
        let url = this.post.description.match(regex);
        console.log(this.post.description);

        if (url) {
          console.log("entro 2");
          url.forEach((match, groupIndex) => {
            link = match.split("=");
            this.$set(this.post, "video_link", link[1]);
            this.is_there_url = true;
            this.post.description = this.post.description.replace(match, "");
          });
        }
      }
    }

因此它不满足条件if (url)，因为this.post.description为空...为什么仅当被@paste触发而不是按空格时才为空？

Answer 1

我不确定，但是可能在将值绑定到post.description之前触发了@paste事件。

尝试使用观察者

<textarea 
     id="post-description" 
     class="form-control"
     name="post-description"
     cols="40"
     rows="5"
     v-model="post.description"
></textarea>

，然后在脚本部分添加

computed:{
    postDescription(){
        return this.post.description
    }
},
watch: {
    postDescription() {
      this.checkUrl()
    }
}

我不知道您要实现的模型，但是您必须在观察者上添加条件，以防止在添加的每个新字符上执行该方法，以提高性能。

如何使@onpaste在textarea中触发v模型？

1 个答案: