昨日からVue.jsを触り始めた初心者です。
したいこと
v-clipboardで、messageに設定した値が表示されることは分かりました。
今回は、以下のコードだと、buttonが複数あって、押したbuttonごとにmessageの値を設定されるようにしたいです。(=コピーされる値がbutttonごとに異なる)
実際の私のコードでは、動的にvuejsでtrを複数作って(=table)、それぞれにbuttonがある感じです。(trの中のinputのvalueをコピーさせたい)
どのようにすれば良いのでしょうか?
以下のコードはこのサイトから拝借したものです。
<div id="app"></div> <template id="t"> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">Copy!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { onCopy: function (e) { alert('You just copied: ' + e.text) }, onError: function (e) { alert('Failed to copy texts') } } }) </script>
何か教えて頂けますと大変助かります。
あなたの回答
tips
プレビュー