[Vuejs]-How to filter tid.length using v-if on html list

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

you should do like this.

<template>
  <div class="css-treeview">
    <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>

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": []
  }
]