0

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>

(追加ボタンを押すとオプションの中身が {{ }} のままになっています。そしてもう一回押すと、前回追加されたものに関しては解釈されます)

質問としては即時反映させる方法は無いのか、ですが他にこういう方法がある、ということがあれば教えていただけると幸いです

1 件の回答 1

0
  methods: {
    addForm: function() {
        const el = $('.js-selectes:last').after(this.cloneElement);
        this.$compile(el);
    },

となっていますが、このelは追加するベースとなった(≒もとからあった)要素ですよね。

たとえば

  methods: {
    addForm: function() {
        $('.js-selectes:last').after(this.cloneElement);
        this.$compile($('.js-selectes:last')[0]);
    },

のようにすればおそらく求められている挙動は実現できるかと思います。(ただしい解決法かは別として。)

1
  • ありがとうございます。確かによくよく考えればそのようにcompileに与えれば良かったですね。助かりました。
    – lion
    Commented 2016年10月21日 8:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。