Problem with Recursive Components in Vue.js

Question

I'm a beginner in Vue.js and I'm getting stuck on using recursive components. When I try to recall the GroupFilter component in the GroupFilter component, the test message "New filter group" is displayed fine, but not the new GroupFilter component. I have tried using an import and using the name given to the component, but in both cases it does not work.

Does anyone know how to make this work ? Thank you in advance for your help !

<template>  
  <div class="groupFilter">
    <p>OR</p>
    <div class='groupFilterForms'>
      <div class="selectButton">
        <button type="button" class="btn btn-primary" v-on:click="addNewFilter">+ Add Filter</button>
        <button type="button" class="btn btn-success" v-on:click="addNewGroupFliter">+ Add Filter Group</button>
      </div>

      <div v-for="(child, index) in this.$store.state.storeData[this.index].$all" :index="index" :key="index"> 
        <div v-if="child.condition">
          <FilterTemplate :index='index'/>
        </div>  
        <div v-else-if="child.$all">
          <h3>New filter group</h3>
          <GroupFilter/>
        </div>
      </div>      
    </div>
  </div>
</template>

<script>

import FilterTemplate from'./FilterTemplate';
import GroupFilter from './GroupFilterTemplate'
  export default {  
    name: 'GroupFilter',
    components: {
      FilterTemplate,
      GroupFilter        
    },
        data: function (){
            return {
                storeData: [],
        props: this.index,
        toto: Array 
            }
    },
    props: ['index'],
    mounted: function(){
      this.storeData = this.$store.state.storeData
    },
    methods: {
      addNewFilter(){
        console.log("new filter TEST")
        this.storeData[this.props].$all.push( 
          {condition:{
            "attr":"group_id",
            "ope":"eq",
            "value":106
         }}
         );
                 this.$store.commit('setStoreData', this.storeData);
                 console.log(this.storeData[index])
      },
      addNewGroupFliter(){
        console.log("new group filter TEST")
        this.storeData[this.props].$all.push({ 
          $all:[ 
            {condition:{
            "attr":"group_id",
            "ope":"eq",
            "value":106
            }}
          ]
        })
                this.$store.commit('setStoreData', this.storeData);              
      } 
        }   
  }
</script>

you shouldn't use self-closing tags for vue components. see this question for more info https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5 — Igor Moraru, Mar 14 '21 at 11:45
no, you should use it in SFC. But not directly in the DOM. See the styleguide: https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended — Dvdgld, Mar 14 '21 at 11:53

Problem with Recursive Components in Vue.js

0 Answers0