Question

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

选中复选框后，将移至此 div类：

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

我的html with static checkbox。

<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中，他们说这在飞行创建/编译中并不是一种好的做法。

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

1 个答案: