vendredi 14 septembre 2018

vuejs check checkbox if id is in array

Hey everyone I've been at this for over two weeks and still cant figure this out. I have two json encoded arrays.

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

selectedCategories:

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

What I've been trying to do is write a vuejs method that checks the checkboxes with the id of the currentlySelectedCategories when it loads and places them in the currentlySelected array in the data property. However when I attempt to do this I am able to place them in the array but the checkboxes are not checked.

    <?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)">
          </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>




Aucun commentaire:

Enregistrer un commentaire