Laravel/Vue项目中VueJS组件复制链接功能失效无报错如何解决

• 组件结构配置错误：如果使用.vue单文件组件开发，所有的data、methods等组件配置必须放在export default块内，你当前的业务逻辑写在了外部独立的new Vue实例中，和当前组件没有绑定。如果是在HTML中直接写Vue代码，多余的export default属于无效代码，可能干扰逻辑执行。
• 缺少核心的剪贴板写入逻辑：你现有的copyURL方法仅将链接地址赋值给了响应式变量link，没有调用浏览器提供的剪贴板API执行写入系统剪贴板的操作，这是功能失效且控制台无报错的核心原因——代码无语法错误，只是缺少核心功能逻辑。
• 触发a标签默认跳转：复制图标包裹在a标签内部，点击时会触发a标签的默认跳转行为，打开新页面，也会干扰功能的正常执行。

1. 修复模板代码 #

给点击事件添加.prevent修饰符，阻止a标签的默认跳转行为：

<a href="sample.site" class="text-dark" target="_blank" rel="noopener noreferrer" ref="mylink">
    <img class="social_icon"  @click.prevent="copyURL($refs.mylink)"
      src="/images/game/copy.png"
      alt="复制链接"
    />
</a>
<p>copied: {{ link }}</p>

2. 修复script逻辑 #

如果你使用.vue单文件组件开发： #

<script>
export default {
  data() {
    return {
      link: ''
    }
  },
  methods: {
    async copyURL(linkEl) {
      const targetUrl = linkEl.href
      try {
        // 调用浏览器剪贴板API写入内容
        await navigator.clipboard.writeText(targetUrl)
        this.link = targetUrl
        // 可根据需求自行添加复制成功的交互提示
      } catch (err) {
        // 旧浏览器降级兼容方案
        const input = document.createElement('input')
        input.value = targetUrl
        document.body.appendChild(input)
        input.select()
        document.execCommand('copy')
        document.body.removeChild(input)
        this.link = targetUrl
      }
    }
  }
}
</script>

如果你在HTML页面直接编写Vue实例代码： #

删除无效的export default语句即可，其余逻辑和上面一致：

<script>
const app = new Vue({
    el: '#app',
    data() {
      return {
        link: ''
      }
    },
    methods: {
      async copyURL(linkEl) {
        const targetUrl = linkEl.href
        try {
          await navigator.clipboard.writeText(targetUrl)
          this.link = targetUrl
        } catch (err) {
          const input = document.createElement('input')
          input.value = targetUrl
          document.body.appendChild(input)
          input.select()
          document.execCommand('copy')
          document.body.removeChild(input)
          this.link = targetUrl
        }
      }
    }
})
</script>

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