vuejs复选框

oaxa6hgo 于 2021-06-21 发布在 Mysql

关注(0)|答案(1)|浏览(314)

嘿，各位，我已经在这里呆了两个多星期了，但还是搞不明白。我有两个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并将其放置在data属性的currentlyselectedcategories数组中时，该方法会检查该id是否在currentlyselectedcategories数组中的复选框。但是，当我尝试这样做时，我可以将它们放置在数组中，但复选框没有选中。在这种情况下，应检查misc和automotive，因为id 3和4在选定的类别中

<?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>

mysql vue.js php CheckBox

来源：https://stackoverflow.com/questions/52335139/vuejs-check-checkbox-if-id-is-in-array

1条答案

按热度按时间

7ivaypg91#

我找到了一个方法来完成你想要的。我使用computed属性返回原始数组的修改版本，而不是为每个对象包含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>

赞(0）回复(0）举报 2021-06-21

我来回答

vuejs复选框

1条答案

相关问题

热门标签

最新问答