javascript - 在for迴圈中使用Vue的新增、刪除的問題？

Question

有一個需求如下：

彩色標示的是該client已經添加的vendor，灰色標識的是網站期望client添加的（該分類）vendor，
現在需求：如果client添加了期待添加的分類vendor，那麼該vendor出現在上方，且下面消失。如果已新增的vendor沒有期望新增的分類vendor，則從上方消失出現在下方（可以即時新增刪除）。

說明 ： vendor 有一個分類標誌category_id ，一個category_id 可以對多個vendor 。

html程式碼：

<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程式碼：

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

發送ajax請求的ajaxGetData方法處理上述邏輯，但總是有點問題：

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];
    }
  }

每次頁面重新載入時，頁面表現正常，但單一的新增/刪除一個vendor似乎無法正常運作。

貼上兩個vue的data資料：
defaultShowVendor.vendors:

#vendors.vendors

#

Answer 1

你確定你是在用vue寫嗎？你這樣寫還不如不用vue呢，完全沒有體現vue的價值。