29760


Vue.jsに関しての質問なのですが、 `this.$compile` が即時反映されないのですが、そういうものなのでしょうか？  
参考URL: <https://jsfiddle.net/orangelion/L5xs401d/6/>

[code]

    // 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'
    });
[/code]

[code]

    select {
      width: 100px;
    }
    
    btn {
      width: 100px;
    }
[/code]

[code]

    <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>
[/code]

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

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


CC BY-SA 4.0
2016-10-21T03:26:46.473
29759
2019-12-13T19:30:11.543
2019-12-13T19:30:11.543
32986
19257
question
javascript vue.js
Vue.jsのthis.$compileが即時反映されない

[code]

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

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

たとえば

[code]

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

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


CC BY-SA 3.0
2016-10-21T03:51:43.257
29760
2016-10-21T03:51:43.257
2376
29759
answer