Question

我尝试将Vuejs与jquery一起使用。我不知道为什么这不起作用。首次加载时，图标看起来并不像。我不知道出了什么问题。当您单击项目时，会看到加号和减号图标，并且它按预期工作。但为什么它不能在第一次装载时工作？

任何帮助将不胜感激。

＆＃13;

var data = {
  name: 'My Tree',
  children: [{
    name: 'hello'
  }, {
    name: 'wat'
  }, {
    name: 'child folder',
    children: [{
      name: 'child folder',
      children: [{
        name: 'hello'
      }, {
        name: 'wat'
      }]
    }, {
      name: 'hello'
    }, {
      name: 'wat'
    }, {
      name: 'child folder',
      children: [{
        name: 'hello'
      }, {
        name: 'wat'
      }]
    }]
  }]
}

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  computed: {
    isFolder: function() {
      return this.model.children &&
        this.model.children.length
    }
  },
});

// boot up the demo
var demo = new Vue({
  el: '#demo',
  ready: function() {

  },
  data: {
    treeData: data
  }
});
Vue.nextTick(function() {
  $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
  $('.tree li.parent_li > span').on('click', function(e) {
    var children = $(this).parent('li.parent_li').find(' > ul > li');
    if (children.is(":visible")) {
      children.hide('fast');
      $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
    } else {
      children.show('fast');
      $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
    }
    e.stopPropagation();
  });
})

＆＃13;

.tree {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
   background-color: #fbfbfb;
   border: 1px solid #999;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
 }
 
 .tree li {
   list-style-type: none;
   margin: 0;
   padding: 10px 5px 0 5px;
   position: relative
 }
 
 .tree li::before,
 .tree li::after {
   content: '';
   left: -20px;
   position: absolute;
   right: auto
 }
 
 .tree li::before {
   border-left: 1px solid #999;
   bottom: 50px;
   height: 100%;
   top: 0;
   width: 1px
 }
 
 .tree li::after {
   border-top: 1px solid #999;
   height: 20px;
   top: 25px;
   width: 25px
 }
 
 .tree li span {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #999;
   border-radius: 5px;
   display: inline-block;
   padding: 3px 8px;
   text-decoration: none
 }
 
 .tree li.parent_li>span {
   cursor: pointer
 }
 
 .tree>ul>li::before,
 .tree>ul>li::after {
   border: 0
 }
 
 .tree li:last-child::before {
   height: 30px
 }
 
 .tree li.parent_li>span:hover,
 .tree li.parent_li>span:hover+ul li span {
   background: #eee;
   border: 1px solid #94a0b4;
   color: #000
 }

＆＃13;

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="demo">
  <div class="tree well">
    <item :model="treeData"></item>
  </div>
</ul>
<script type="text/x-template" id="item-template">
  <li>
    <span><i v-if="isFolder" class="icon-minus-sign"></i> {{model.name}}</span>
    <ul v-if="isFolder">
      <item v-for="model in model.children" :model="model"></item>
    </ul>
  </li>
</script>

＆＃13;

Answer 1

其实这是我的错。我为图标调用了错误的类名。我正在更新，一切都会正常。我希望这个vue递归树模型对其他人有用。

Vuejs不会在组件中显示图标

1 个答案: