Vue.jsに関しての質問なのですが、 this.$compile
が即時反映されないのですが、そういうものなのでしょうか?
参考URL: https://jsfiddle.net/orangelion/L5xs401d/6/
// https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
// https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js
Vue.component('test-select-children', {
template: '#test-select-children-template',
data: function() {
return {
filterData1: [{id: 1}, {id: 4}, {id: 5}],
filterData2: [{id: 5}],
test1s: [{id: 1, name: 'a'}, {id: 2, name: 'b'}],
test2s: [{id: 3, name: 'c'}, {id: 4, name: 'd'}],
cloneElement: `
<div class='js-selectes'>
<label>要素1</label>
<select class='select hoge'>
<option v-for='test1 in test1s | filterBy filterTest1' v-bind:value='test1.id'>
{{ test1.name }}
</option>
</select>
<label>要素2</label>
<select class='select foo'>
<option v-for='test2 in test2s | filterBy filterTest2' v-bind:value='test2.id'>
{{ test 2.name }}
</option>
</select>
</div>
`
}
},
methods: {
addForm: function() {
const el = $('.js-selectes:last').after(this.cloneElement);
this.$compile(el.get(0));
},
}
});
new Vue({
el: 'body'
});
select {
width: 100px;
}
btn {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script id='test-select-children-template' type='text/x-template'>
<div class='js-selectes'>
<label>要素1</label>
<select class='hoge'>
<option v-for='test1 in test1s' v-bind:value='test1.id'>
{{ test1.name }}
</option>
</select>
<label>要素2</label>
<select class='foo'>
<option v-for='test2 in test2s' v-bind:value='test2.id'>
{{ test2.name }}
</option>
</select>
</div>
<button v-on:click='addForm()'>追加</button>
</script>
<test-select-children></test-select-children>
(追加ボタンを押すとオプションの中身が {{ }}
のままになっています。そしてもう一回押すと、前回追加されたものに関しては解釈されます)
質問としては即時反映させる方法は無いのか、ですが他にこういう方法がある、ということがあれば教えていただけると幸いです