如果id在数组中，则检查vuejs复选框

Question

嘿大家我已经在这里呆了两个多星期了，仍然无法弄清楚这一点。我有两个json编码的数组。

类别：

[{ “ID”： “1”， “类别”： “假日”}，{ “ID”： “2”， “类别”： “体育”}，{ “ID”： “3”， “类别”： “杂项”}，{ “ID”： “4”， “类别”： “汽车”}，{ “ID”： “6”， “类别”： “零售”}，{ “id为”： “7”， “类别”： “财经”}，{ “ID”： “8”， “类别”： “教会”}，{ “ID”： “9”， “类别”： “社区”}，{ “ID”： “10”， “类别”： “食品”}，{ “ID”： “11”， “类别”： “医疗”}]

selectedCategories：

[{ “0”： “3”， “ID”： “3”}，{ “0”： “4”， “ID”： “4”}]

我一直在尝试做的是编写一个vuejs方法，如果id在加载时位于currentSelectedCategories数组中，则检查复选框，并将它们放在data属性的currentSelected数组中。但是，当我尝试这样做时，我可以将它们放在数组中但不检查复选框。在这种情况下，应检查杂项和汽车，因为id 3和4在selectedCategories中

    <?php session_start(); ob_start(); require_once('database.php'); $templateId=$_GET['id']; require_once('header.php');

$currentlySelectedCategoriesQuery="SELECT id FROM dataclayCategories WHERE id IN (SELECT dataclayCategoryLink.categoryId FROM dataclayCategoryLink WHERE dataclayCategoryLink.templateId='$templateId')";
    $currentlySelectedCategoriesResult=mysqli_query($mysqli, $currentlySelectedCategoriesQuery);
    $currentlyAssociatedCategories=array();
    while($row=mysqli_fetch_array($currentlySelectedCategoriesResult)){
        $currentlyAssociatedCategories[]=$row;
    }

    $selectDataclayTemplatesCategories="SELECT * FROM creative_engine.dataclayCategories";
    $result = mysqli_query($mysqli, $selectDataclayTemplatesCategories);
    $categoryArray=array();
    while($row=mysqli_fetch_assoc($result)){
    $categoryArray[]=$row;
    }
    ?>
    <div id="app" >
        <div class="content container">
    <form role="form" onsubmit="return false">
      <div class="form-group">
    <label v-for="item in categories" class="checkbox-inline">
        <input type="checkbox" :value=item.id :id="item.id" v-model="selectedCategories" name="selectedCategories[]" @click="check($event)">{{item.category}}
          </label>
    </div>
    </form>
        </div>
        </div>

    <script>
      var app = new Vue({
      el: '#app',
      data: {
        selectedCategories: [],
        categories: []
      },
      created: function(){
      this.categories=<?php echo json_encode($categoryArray);?>;
      this.selectedCategories=<?php echo json_encode($currentlyAssociatedCategories);?>;
      },
      methods: {
        check: function(e) {
          if (e.target.checked) {
            console.log(e.target.value)
          }
        }
      }
    });
    </script>

Answer 1

我找到了一种方法来完成你想要的东西。我使用计算属性来返回原始数组的修改版本，而不是包含每个对象的checked属性。这是一个工作示例，调整为排除PHP调用。 https://codepen.io/anon/pen/eLjeYE

<template>
  <div id="app">
    <div class="content container">
      <form role="form" onsubmit="return false">
        <div class="form-group">
          <label v-for="(item, idx) in checkedCategories" class="checkbox-inline" v-bind:key="idx">
            <input type="checkbox" :value=item.id :id="item.id" :checked="item.checked" @click="check($event)">{{item.category}}
          </label>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selectedCategories: [{"0":"3","id":"3"},{"0":"4","id":"4"}],
      categories: [{"id":"1","category":"Holiday"},{"id":"2","category":"Sports"},{"id":"3","category":"Misc"},{"id":"4","category":"Automotive"},{"id":"6","category":"Retail"},{"id":"7","category":"Financial"},{"id":"8","category":"Church"},{"id":"9","category":"Community"},{"id":"10","category":"Food"},{"id":"11","category":"Healthcare"}],
    }
  },
  computed: {
    checkedCategories: function () {
      var checkedIds = []
      var results = []
      for (var i = 0; i < this.selectedCategories.length; i++ ) {
        checkedIds.push(this.selectedCategories[i].id)
      }
      for (var j = 0; j < this.categories.length; j++ ) {
        var item = this.categories[j];
        if (checkedIds.includes(this.categories[j].id)) {
          item.checked = true
        } else {
          item.checked = false
        }
        results.push(item)
      }
      return results
    }
  },
  methods: {
    check (e) {
      if (e.target.checked) {
        var newCat = {
          '0': e.target.value,
          'id': e.target.value
        }
        this.selectedCategories.push(newCat)
      } else {
        for (var i = 0; i < this.selectedCategories.length; i++ ) {
          if (this.selectedCategories[i].id == e.target.value) {
            this.selectedCategories.splice(i, 1)
          }
        }
      }
    }
  }
}
</script>