[Vuejs]-V-bind in nested component for radio input is breaking

by

0👍

Found Solution my own question:
First I had used select but later I thought of using radio, but just for debugging purpose I did not remove select and never though that will cause issue as the radio first level buttons were working fine.

Here is the select code that was causing the problem:

<div class="form-group">
  <label for="inputAddGroupParent">Parent</label>
  <select class="form-control" id="inputAddGroupParent" v-model="groupInputtedData.group_parent_id">
    <option :value="0">None</option>
    <option v-for="groupsNested in groupsDataNested" :value="groupsNested.group_id">{{groupsNested.group_name}} {{groupsNested.group_id}}</option>
  </select>
</div>

While debugging I had to create minimal working example, so that I can reproduce the issue, so that someone can help me here in stack overflow but ended have a working code 🙂 So, here is it, feel free to use if someone need it. 

let data = [ { "group_id": 36, "group_parent_id": null, "group_name": "Fresno Bee", "group_type_id": 1, "groups": [ { "group_id": 38, "group_parent_id": 36, "group_name": "Test", "group_type_id": 3, "groups": [] } ] }, { "group_id": 21, "group_parent_id": null, "group_name": "Miami Herald", "group_type_id": 1, "groups": [ { "group_id": 28, "group_parent_id": 21, "group_name": "Business", "group_type_id": 3, "groups": [] }, { "group_id": 29, "group_parent_id": 21, "group_name": "Sports", "group_type_id": 3, "groups": [ { "group_id": 34, "group_parent_id": 29, "group_name": "Football", "group_type_id": 3, "groups": [] }, { "group_id": 35, "group_parent_id": 29, "group_name": "Tennis", "group_type_id": 3, "groups": [] } ] } ] }, { "group_id": 23, "group_parent_id": 20, "group_name": "Sacramento Bee", "group_type_id": 1, "groups": [ { "group_id": 30, "group_parent_id": 23, "group_name": "Money", "group_type_id": 3, "groups": [] }, { "group_id": 25, "group_parent_id": 23, "group_name": "Sports", "group_type_id": 3, "groups": [] } ] } ]

Vue.component('AppGroupRadioItem', {
  props: {
groups: Object,
inputtedData: Object
  },
  template: '#group-template'
});

new Vue({
  el: '#app',
  data() {
return {
  groupsDataNested: data,
  groupInputtedData: {
    group_name: '',
    group_type_id: '',
    group_parent_id: ''
  }
}
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<!--<script src="//unpkg.com/vue@2.4.1"></script>--> <!-- works in 2.4.1 as well -->

<div id="app">
  <div class="container">
<div class="row">
  <div class="col-6">
    <div class="card rounded-0 border-top-0 border-bottom-0">
      <app-group-radio-item
        v-for="groupsNested in groupsDataNested"
        :key="groupsNested.group_id"
        :groups="groupsNested"
        :inputted-data="groupInputtedData">
      </app-group-radio-item>
    </div>
  </div>
  <div class="col-6">
    <h3>groupInputtedData: {{groupInputtedData.group_parent_id}}</h3>
  </div>
</div>
  </div>
</div>

<script type="text/x-template" id="group-template">
  <div class="list-group list-group-flush">
<div class="list-group-item">
  <div class="form-group">
    <label class="custom-control custom-radio">
      <input type="radio" class="custom-control-input"
             :value="groups.group_id"
             v-model="inputtedData.group_parent_id">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">{{groups.group_name}}</span>
    </label>
  </div>
</div>

<div class="nested-items">
  <app-group-radio-item
    v-for="groupsNested in groups.groups"
    :key="groupsNested.group_id"
    :groups="groupsNested"
    :inputted-data="inputtedData"
    style="padding-left: 40px">
  </app-group-radio-item>
</div>
  </div>
</script>

Leave a comment