Vue邮箱提取工具故障：如何通过按钮调用两个函数？

你的代码存在几个核心问题，导致邮箱过滤功能无法正常运行：

• 把computed属性当成方法调用了——computed是依赖响应式数据自动计算的属性，不能像方法那样手动调用。
• 过滤逻辑里做了去重，但最后返回的是原始匹配结果，没用到去重后的数组，等于白做了。
• 提取邮箱的方法根本没用到过滤后的结果，反而把原始文本直接赋值给了目标textarea。
• 没有处理匹配不到邮箱的情况，这时候会直接抛出报错。
• 模板里用了未定义的变量，属于无效代码。

修复步骤 #

1. 重构computed属性，正确返回去重后的邮箱列表，同时处理匹配不到邮箱的空值情况。
2. 修改提取方法，直接把computed过滤后的结果赋值给emails。
3. 简化按钮点击事件，只需要调用提取方法即可。
4. 移除模板里的无效代码，添加邮箱数量统计。

修复后的完整代码 #

<template>
  Paste Text: <br>
  <textarea name="output" cols="50" rows="12" v-model="rawText" placeholder="paste here"></textarea>
  <br>

  <button type="button" @click="extractEmails">Get emails</button><br>
  <span class="counter">共找到 {{filteredEmails.length}} 个邮箱</span><br>
  Emails in text:<br>
  <textarea name="output" cols="50" rows="12" v-model="emails"></textarea>
</template>

<script>  
export default {
  data(){
    return {
      rawText: "hello email",
      emails: ''
    }   
  },
  computed: {
    filteredEmails(){
      const temp = this.rawText;
      const exp = /([A-Za-z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
      const emailData = temp.match(exp) || []; // 处理无匹配的情况，默认返回空数组
      const holder = [];
      // 去重逻辑
      for (let x = 0; x < emailData.length; x++){
        if(holder.indexOf(emailData[x]) === -1){
          holder.push(emailData[x]);
        }
      }
      return holder;
    }
  },
  methods:{
    extractEmails(){
      // 将过滤后的邮箱用换行分隔，方便在textarea里逐行显示
      this.emails = this.filteredEmails.join('\n');
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者kelbal