为什么我的函数在使用v-for vue js复选框时不能工作？

Question

我想按优先级顺序拖放表行的排序。

选中的复选框将移到此div类中：

<div class="table-test">
    <ul>
        {{-- for checkbox checked --}}
    </ul>
</div>

我的html带有静态复选框。

<div class="test__list__checkbox checkbox-test">
<ul>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-11" class="checkbox--input">
            <label for="checkbox-11" class="checkbox--label">Mandarin Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-12" class="checkbox--input">
            <label for="checkbox-12" class="checkbox--label">Accounting Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-13" class="checkbox--input">
            <label for="checkbox-13" class="checkbox--label">TOEFL</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-14" class="checkbox--input">
            <label for="checkbox-14" class="checkbox--label">Color Blind Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-15" class="checkbox--input">
            <label for="checkbox-15" class="checkbox--label">Basic Home</label>
        </div>  
    </li>
</ul>

​

这是我的职责

function moveCheck(){
  $(document).ready(function() {
      //Helper function to keep table row from collapsing when being sorted
      var fixHelperModified = function(e, li) {
      var $originals = li.children();
      var $helper = li.clone();

      $helper.children().each(function(index)
      {
        $(this).width($originals.eq(index).width())
      });
        return $helper;
      };

      //Make diagnosis table sortable
      $(".table-test ul").sortable({
        helper: fixHelperModified,
        stop: function(event,ui) {renumber_table('.table-test')}
      }).disableSelection();
  });

  //Renumber table rows
  function renumber_table(tableID) {
    $(tableID + " li").each(function() {
      count = $(this).parent().children().index($(this)) + 1;
      console.log(count);
      $(this).find('.priority').html(count);
    });
  }

  var checkedList = $('.table-test ul');
  var unCheckedList = $('.checkbox-test  ul');
  var checkBoxInput = $('.checkbox--input');

  $('.checkbox--input').change(
  function(){
    if (this.checked){
      $(this).closest('li').appendTo(checkedList);
      renumber_table('.table-test');
    }
    else if (!this.checked){
      $(this).closest('li').appendTo(unCheckedList);
      renumber_table('.table-test');
    }
  });
}

这是很好的工作，但当我更改为复选框动态vue js，它不工作，我不知道为什么。如下所示：

<div class="test__list__checkbox checkbox-test">
<ul>
    <li v-for="test_list in dt_test_list">
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-@{{ test_list.id }}" class="checkbox--input">
            <label for="checkbox-@{{ test_list.id }}" class="checkbox--label">@{{ test_list.type }}</label>
        </div>  
    </li>
</ul>

​

有人帮我吗？非常感谢

Answer 1

文档就绪似乎是在vue实例之前启动的。

因此，您只需要使用vue的就绪方法来初始化您的可排序代码逻辑。

首先，所有数据将加载，然后您可以使用。

new Vue({
el: 'body',
ready:function(){
  this.initializeSortable();
},
methods: {
  initializeSortable: function() {
    // your all code here after vue instance is ready and loop is done
  }
});

这是我们的第一步，所有的元素，将来预加载。

现在，如果添加新元素，则需要编译vue的html以使该html表现为vue组件。

    addNewElement: function(){
       var element = $('#app').append('<div>some html variable</div>');
       /* compile the new content so that vue can read it */
       this.$compile(element.get(0));
    },

在这里，您的元素将是您的新附加元素。

然而，在vue中，他们说这是一种即兴创作/编译的做法。