Question

问题是我无法点击嵌套的单选按钮，但能够点击顶级单选按钮。

我在父视图中导入了此组件：

<app-group-radio-item
  v-for="groupsNested in groupsDataNested"
  :key="groupsNested.group_id"
  :groups="groupsNested"
  :groupInputtedData="groupInputtedData">
</app-group-radio-item>

<script>
  import AppGroupRadioItem from "./GroupRadioItem";

  export default {
    name: 'addGroup',
    components: {AppGroupRadioItem},

    props: {
      groupsDataNested: Array,
    },

    data(){
      return {
        groupInputtedData: {
          group_name: '',
          group_type_id: '',
          group_parent_id: ''
        }
      }
    }
  }
</script>

我要导入的嵌套组件：

<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="groupInputtedData.group_parent_id">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">{{groups.group_name}}</span>
        </label>
      </div>
    </div>

    <div class="collapse nested-items"
         :id="'collapseExample' + groups.group_id + 'radio'"
         v-if="hasChildren">
      <app-group-radio-item
        v-for="groupsNested in groups.groups"
        :key="groupsNested.group_id"
        :groups="groupsNested"
        :groupInputtedData="groupInputtedData">
      </app-group-radio-item>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'appGroupRadioItem',

    data: function () {},

    props: {
      groups: Object,
      groupInputtedData: Object
    }
  }
</script>

提前致谢。

Answer 1

找到解决方案我自己的问题：首先我使用了select，但后来我想到了使用无线电，但仅仅是为了调试目的，我没有删除select并且从不会因为无线电第一级按钮工作正常而导致问题。

以下是导致问题的select代码：

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

虽然调试我必须创建最小的工作示例，以便我可以重现这个问题，以便有人可以帮助我在堆栈溢出但结束了有一个工作代码:)所以，这里是它，随时使用如果有人需要它。

＆＃13;

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: ''
  }
}
  }
});

＆＃13;

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

＆＃13;

用于无线电输入的嵌套组件中的v-bind正在破坏

1 个答案: