How can i only let tid length 7 at level one and tid length 10 go to show at level two. I tried to use v-if to make as filter but only show the level one, but level two doesn't show.
Tid
Current Problem
Treelist << Tree list
Example << What i looking for

      <div >
        <template v-for="item in treelist" :key="item">
          <ul>
          <li v-if="item.t.length == 7"><input type="checkbox" id="item-0" /><label for="item-0">{{item.mAcName}} --- {{item.mName}}</label>
            <ul>
              <li v-if="item.t.length == 10"><input type="checkbox" id="item-0-0" /><label for="item-0-0">{{item.mAcName}} --- {{item.mName}}</label>
              </li>
            </ul>
          </li>
        </ul>
        </template>   
      </div>

CodePudding user response：

This condition always returns 'false' because there is no overlap in the types '7' and '10'.

you should do like this.

<template>
  <div >
    <template v-for="item in treelist" :key="item">
      <ul>
        <li v-if="item.t.length === 7">
          <input type="checkbox" id="item-0" /><label for="item-0">{{ item.mAcName }} --- {{ item.mName }}</label>
          <ul>
            <template v-for="item2 in treelist" :key="item2">
              <li v-if="item2.t.length === 10">
                <input type="checkbox" id="item-0-0" />
                <label for="item-0-0">{{ item2.mAcName }} --- {{ item2.mName }}</label>
              </li>
            </template>
          </ul>
        </li>
      </ul>
    </template>
  </div>
</template>

CodePudding user response：

Does this solve your problem? However, this is a bad practice to solve it on front-end. I would've discuss this with the back-end so they return 10 in 7 object.

<div >
  <template v-for="item in treelist" :key="item">
    <ul>
      <li v-if="item.t[6]"><input type="checkbox" id="item-0" /><label for="item-0">{{item.mAcName}} --- {{item.mName}}</label>
        <ul>
          <li v-if="item.t[9]">
            <input type="checkbox" id="item-0-0" />
            <label for="item-0-0">{{item.mAcName}} --- {{item.mName}}</label>
          </li>
        </ul>
      </li>
    </ul>
  </template>
</div>

CodePudding user response：

As stated in @O-h-y-0 answer, the problem with your code is that the "if" clause is overlapping.

The "if" clause checking for length 10 will never be executed since it is wrapped with an "if" clause limiting for length 7. But the problem with his answer is that the second loop will execute in every parent so that it will appear duplicated.

My advice is to create a computed variable, where inside it you regroup the item with with length 7 as a parent and move the item with length 10 as the children. For example, I have this simple data.

<template>
  <div>
    <ul>
      <li v-for="item in treeGrouped">
        {{item.value}}
        <ul>
          <li v-for="child in item.children">
            {{child}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        treelist: [
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabb',
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabb',
        ]
      }
    },
    computed: {
      treeGrouped() {
        const result = []
        this.treelist.forEach((item)=>{
          if (item.length === 7) {
            result.push({
              value: item,
              children: [], 
            })
          } else if (item.length === 10) {
            if (result.length) {
              result[result.length-1].children.push(item)
            }
          }
        })
        return result;
      }
    }
  }
</script>

This logic on computed only apply to that simple data I make, because it too long to replicate your data since you only provide example data as an image. But if you understand what I mean, I'm pretty sure you can improve it to your needs.

Edit: For reference, those logic on computed will give you something like this.

[
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb",
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": []
  },
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb",
      "aaaaabbbbb",
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": []
  }
]