Why my function doesn't work when checkbox with v-for vue js?

Question

I want to Drag and drop sorting of table rows in priority order.

When checkbox checked will be moved into this div class :

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

My 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>

And this is my function

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');
    }
  });
}

This is working just fine, but When I change to checkbox dynamic with v-for vue js it doesn't work, I don't know why. Like this:

<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>

Anyone help me? Many thanks

Can you post the code of the component which contains the template ith v-for (and dt_test_list)? — nils
– nils, Commented Feb 24, 2016 at 10:25

Hardik Satasiya · Accepted Answer · 2016-12-26 06:35:20Z

it seems document ready is fired up before your vue instance.

so you just need to use vue's ready method to initialize your sort-able code logic.

first all data will load and then you can use.

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

this is our first step for all element which will come pre-loaded.

now if you add new element you need to compile vue's html to make that html behave like vue component.

    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));
    },

here your element will be your new append element.

however in vue they said this on the fly creation / compilation is not good practice.

Collectives™ on Stack Overflow

Why my function doesn't work when checkbox with v-for vue js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related