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

Question

大家好，我已经处理这个问题两个多星期了，但仍然无法解决这个问题。我有两个 json 编码的数组。

类别:

[{"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"}]

选择的类别:

[{"0":"3","id":"3"},{"0":"4","id":"4"}]

我一直在尝试做的是编写一个 vuejs 方法，该方法在加载时检查复选框 id 是否在 currentlySelectedCategories 数组中，并将它们放置在数据属性的 currentlySelected 数组中。但是，当我尝试这样做时，我可以将它们放在数组中，但未选中复选框。在这种情况下，应检查 Misc 和 Automotive，因为 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

我找到了一种方法来完成您正在寻找的东西。我正在使用计算属性返回原始数组的修改版本，而不是为每个对象包含一个检查属性。这是一个工作示例，经过调整以排除 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>