为什么当带有 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');
    }
  });
}

这工作得很好， 但是当我使用 v-for 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 的 ready 方法来初始化你的可排序代码逻辑。

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

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 中，他们说这种动态创建/编译不是好的做法。