How can I hide the /- button when there is no item at below?

Current Problem

Example Sandbox Link

<template v-for="item in SevenLengthlist" :key="item">
  <ul>
    <li><input type="checkbox" id="item-0" /><label for="item-0">{{ item.mAcName }} --- {{ item.mName }}</label>
      <ul>
        <li v-for="item2 in item.TenLength" :key="item2">
          <input type="checkbox" id="item-0-0" />
          <label for="item-0-0">{{ item2.mAcName }} --- {{ item2.mName }}</label>
          <ul>
            <li v-for="item3 in item2.TenLength" :key="item3">
              <input type="checkbox" id="item-0-0" />
              <label for="item-0-0">{{ item3.mAcName }} --- {{ item3.mName }}</label>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</template>

CodePudding user response：

First off, your current implementation is quite bad.
Doing that with an image background offset is not a good way of doing things here (SVG v-show would be far better/easier to handle).

Some key points:

• the result will be sub-par, you'll have pixelisation if zoomed
• the logic needs to be brought to the template (I do not recommend trying to do all of that into the style section even if somehow feasible, no point: use what Vue provides you)
• your example is naive and doesn't use recursivity at all (while it's the main thing here)
• I fixed quite few mistakes regarding proper practices console errors (please use ESlint)

I recommend the following example from the docs: https://vuejs.org/examples/#tree

Meanwhile, the final result can be achieved by using the following code

<template>
  <div >
    <ul>
      <li v-for="item in list1" :key="item.a">
        <input :id="`item-${item.a}`" type="checkbox" />
        <label :for="`item-${item.a}`"
          :>
          {{ item.a }}
        </label>
        <ul>
          <li v-for="item2 in item.list2" :key="item2.a">
            <input :id="`item-${item2.a}`" type="checkbox" />
            <label :for="`item-${item2.a}`"
              :>
              {{ item2.a }}
            </label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      list1: [
        {
          a: 'Alex',
          list2: [{ a: 'Dog' }],
        },
        {
          a: 'Blex',
          list2: [{ a: 'Dogoo' }],
        },
        {
          a: 'Clex',
          list2: [],
        },
      ],
    }
  },
}
</script>

<style scoped>
.css-treeview ul,
.css-treeview li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.css-treeview input {
  position: absolute;
  opacity: 0;
}

.css-treeview {
  font: normal 11px 'Segoe UI', Arial, Sans-serif;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.css-treeview a {
  color: #00f;
  text-decoration: none;
}

.css-treeview a:hover {
  text-decoration: underline;
}

.css-treeview input label ul {
  margin: 0 0 0 22px;
}

.css-treeview input label ul {
  display: none;
}

.css-treeview label,
.css-treeview label::before {
  cursor: pointer;
}

.css-treeview input:disabled label {
  cursor: default;
  opacity: 0.6;
}

.css-treeview input:checked:not(:disabled) label ul {
  display: block;
}

/* this part is interesting */
.css-treeview label,
.css-treeview label::before {
  background: url('http://experiments.wemakesites.net/pages/css3-treeview/example/icons.png') no-repeat;
}

.css-treeview label,
.css-treeview a,
.css-treeview label::before {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}

.css-treeview label {
  background-position: 18px 0;
}

.css-treeview label::before {
  content: '';
  width: 16px;
  margin: 0 22px 0 0;
  vertical-align: middle;
  background-position: 0 -32px;
}

/* this is the fix */
label.hide-when-not-needed::before {
  background-position: 0 -48px;
}

/* this one is bad */
input:checked label.open-if-possible::before {
  background-position: 0 -16px;
}

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .css-treeview {
    -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
  }

  @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
    from {
      padding: 0;
    }

    to {
      padding: 0;
    }
  }
}
</style>

Here is a playground.