Help us understand the problem. What is going on with this article?

Vuejsで子コンポーネントの表示内容をクリップボードにコピー

More than 1 year has passed since last update.

Javascriptはあまり詳しくないAndroidエンジニアが、Nuxt.jsとVuetifyでWebページを作成している。

やりたいこと

HTMLで表示した内容をクリップボードにコピーしたい
datapropsで渡した値ではない)

できたコード

これでいけた
div内の全pタグのテキストがクリップボードにコピーできた。

<template>
  <v-layout>
    <v-btn
      icon
      fab
      color="orange"
      @click="witeToClipboard()"
    >
      <v-icon>file_copy</v-icon>
    </v-btn>

    <div id="target">
      <p>コピーしたい文章1</p>
      <p>コピーしたい文章2</p>
      <p>コピーしたい文章3</p>
    </div>
  </v-layout>
</template>

<script>
export default {
  methods: {
    witeToClipboard() {
      const copyText = this.$el.querySelector('#target').textContent
      navigator.clipboard
        .writeText(copyText)
        .then(() => {
          console.log('テキストコピー完了')
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

参考ページ

ikemura23
Androidアプリエンジニアです。 マイブームはFlutterとAWS
http://banbara-studio.hatenablog.com/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away