javascript - Problems with adding and deleting using Vue in a for loop?

Question

There is a requirement as follows:

The colored ones are the vendors that the client has added, the gray ones are the vendors that the website expects the client to add (in this category),
Now requirements: If the client adds If you select the category vendor you want to add, the vendor will appear above and disappear below. If the added vendor does not have the category vendor expected to be added, it will disappear from the top and appear below (can be added and deleted in real time).

Note: vendor has a category flag category_id, and one category_id can be used for multiple vendors.

html code:

<p id='andedVendors'>
  <li class="addVendorScope" v-for="vendor in vendors">
    <a class="addVendorTrigger actived" href="javascript:void(0)">
      <span class="icomoon-delete-icon deleteVendorIcon" href="#quetionnaireModal"  data-toggle="modal" role="button" v-on:click="deleteIcon(vendor.VendorWedding.id)"></span>
      <p class="singleVendorContent">
        <p class="singleVendorIcon">
          <p class="singleVendorIconInner">
            <i class="filterIcon">
              <i><img :src="vendor[0].category_file_identifier" /></i>
            </i>
          </p>
        </p>
        <p class="singleVendorName">
          <h5 class="blueColor">{{vendor.UserProfile.organization_name}}</h5>
          <h4>{{vendor.VendorCategory.category_name}}</h4>
        </p>
      </p>
    </a>
  </li>
  </p>
  <p id="defaultShowVendor">
<li class="addVendorScope" v-for="vendor in vendors">
  <a class="addVendorTrigger" href="#vendors_search_form"  data-toggle="modal" role="button" onclick="javascript:clear_recep1();">
    <p class="singleVendorContent">
      <p class="singleVendorIcon">
        <p class="singleVendorIconInner">
          <i class="filterIcon">
            <i><img :src="vendor.vendor_category_image" /></i>
          </i>
        </p>
      </p>
      <p class="singleVendorName">
        <h5 class="blueColor"></h5>
        <h4>{{vendor.vendor_category_name}}</h4>
      </p>
    </p>
  </a>
</li>
  </p>

js code:

var wedding_id = jQuery('#wedding_id').val();
var getVendorsUrl = root+'/albums/ajaxGetVendorsData';
var ajaxGetData = function(){
  Vue.http.post(getVendorsUrl, {wedding_id:wedding_id},{'emulateJSON':true}).then(function (res) {
    res.body.forEach(function(element){
      if(element.VendorCategory.id in defaultShowVendor.vendorsDeault){
          defaultShowVendor.vendors[element.VendorCategory.id] = '';
          delete defaultShowVendor.vendors[element.VendorCategory.id]
      }
    });

    for(object in defaultShowVendor.vendorsDeault){
      if(! (object in defaultShowVendor.vendors) ){
        var isExite = false;
        (function(object){
          res.body.forEach(function(element){
            if(object == element.VendorCategory.id){
              isExite = true;
            }
          });
        })(object);
        if(!isExite){
          defaultShowVendor.vendors[object] = defaultShowVendor.vendorsDeault[object];
        }
      }
    }
    vendors.vendors = res.body;
  });
}
var ajaxDeleteVendor = function (vendorWeddingID) {
  Vue.http.post(root+'/albums/ajaxDeleteVendor', {vendor_wedding_id:vendorWeddingID,wedding_id,wedding_id},{'emulateJSON':true}).then(function (res) {
    vendors.vendors = res.body;
    $('.deletePendAlb').click();
  });
}

var defaultShowVendors = {
      <?php foreach ($defaultShowVendor as $key => $value) :?>
          <?= $key;?>:{
            vendor_category_id:<?= $key;?>,
            vendor_category_name:'<?= $value['category_name'];?>',
            vendor_category_image: "<?= S3_SERVER_PROFILE_IMAGE_PATH. 'category_images/' . $value['category_file_identifier'];?>"
          },
      <?php endforeach;?>
    };

var defaultShowVendor = new Vue({
  el:'#defaultShowVendor',
  data:{
    vendors :defaultShowVendors,
    vendorsDeault:defaultShowVendors
  }
});

var vendors = new Vue({
    el:'#andedVendors',
    data:{
        vendors:{}
    },
    created:function(){
        ajaxGetData(wedding_id);
    },
    methods:{
        clickEvent:function (wedding_id) {
            ajaxGetData(wedding_id);
        },
        deleteIcon:function(wedding_id){
          deleteVendorModal.vendorId = wedding_id;
        }
    }
});

var deleteVendorModal = new Vue({
  el:'#deleteVendorModal',
    data:{
        vendorId:''
    },
    methods:{
        deleteVendor:function(vendorWeddingID){
          ajaxDeleteVendor(vendorWeddingID);
        }
    }
});

The ajaxGetData method that sends an ajax request handles the above logic, but there is always a problem:

for(object in defaultShowVendor.vendorsDeault){
  if(! (object in defaultShowVendor.vendors) ){
    var isExite = false;
    (function(object){
      res.body.forEach(function(element){
        if(object == element.VendorCategory.id){
          isExite = true;
        }
      });
    })(object);
    if(!isExite){
      defaultShowVendor.vendors[object] = defaultShowVendor.vendorsDeault[object];
    }
  }

Every time the page reloads, the page behaves normally, but adding/removing a vendor individually doesn't seem to work properly.

Paste two vue data:
defaultShowVendor.vendors:

vendors.vendors

Answer 1

Are you sure you are writing in vue? If you write like this, you might as well not use Vue, which completely fails to reflect the value of Vue.