想定
- vue.js 2.0.1
- jqueryのライブラリを使うとき、elementをつかいたい。
- domが作成されるときだけで良い。
- domは後々に追加される。
そういうときに以下のやり方だとbutton要素が取れない
new Vue({
components: {
hoge: {
template: '<button>copy</button>',
create: function() {
//ここでbuttonが欲しい
this.$el; // null
},
ready: function() {
//ここでも取れない。というよりもこのメソッドが呼ばれない
},
attached: function() {
//ここでも取れない。というよりもこのメソッドが呼ばれない
}
}
}
})
そのため、transitionを使う。
new Vue({
components: {
hoge: {
template: '<transition v-on:before-enter="enter"><button>copy</button></transition>',
methods: {
enter: function(el) {
el;//el = button
}
}
}
}
})
もうちょっと具体的に
listにある要素に対して、clipboard.jsを使う場合。（dataの要素が最初から入っていた場合は動きません）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
$(function() {
var vm = new Vue({
el: '#test',
data: {
items: []
},
created: function() {
setTimeout(function(v) {
v.items = [{
name: 'りんご',
subject: 'りんごですよ'
}, {
name: 'いちご',
subject: 'いちごですよ'
}]
}, 1000, this)
},
components: {
clipboard: {
props: ['message'],
data: function() {
return {
clipboard: null
};
},
template: '<transition v-on:before-enter="enter"><button v-bind:data-clipboard-text="message">copy {{message}}</button></transition>',
methods: {
enter: function(el) {
this.clipboard = new Clipboard(el);
}
}
}
}
})
})
</script>
</head>
<body>
<table id="test">
<tbody>
<tr v-for="item in items">
<td>{{item.name}}</td>
<td><clipboard :message="item.subject"/></td>
</tr>
</tbody>
</table>
</body>
</html>