为按钮组创建vue.js组件

问题描述 投票:1回答:1

我想创建一个包含多个按钮组的网页。现有的代码是

$(document).ready(function() {
  $(".nav-link").click(function() {
      console.log(this);
  });
});

Vue.component('nav-bar', {
    props: ['navs'],
    template: `<ul class="nav">
        <li v-for="nav in [{id: 0, text: 'Vege'}, {id:1, text: 'Ch'}]"
            v-bind:item="nav"
            v-bind:key="nav.id">
                <a class="nav-link" v-on:click="setactive($event)">{{ nav.text }}</a></li>
    </ul>`,
    methods: {
        setactive: function(event) {
            $(event.target).closest('ul').find('a.active').removeClass('active');
            $(event.target).addClass('active');
        },
    created: function() {
        $(this).find('a').first().addClass('active');
    }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        navs: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Milk' }
        ]
    }
});
.nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.nav-link.active {
    color: #fff;
    background-color: #007bff;
}
.nav-link {
    color: #4183c4;
    text-decoration: none;
    background-color: transparent;
    border-radius: .25rem;
    padding: .5rem 1rem;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app">
    <nav-bar></nav-bar>
</div>

我的问题是:

  • 如果将<li v-for="nav in [{id: 0, text: 'Vege'}, {id:1, text: 'Ch'}]"更改为<li v-for="nav in navs",则根本不显示任何内容。那有什么不对吗?
  • 为什么不是第一个项目的类在创建时设置为active
  • 如何将导航项直接提供给<nav-bar>

我不想使用bootstrap按钮组。

javascript html vue.js
1个回答
1
投票

如果将<li v-for="nav in [{id: 0, text: 'Vege'}, {id:1, text: 'Ch'}]"更改为<li v-for="nav in navs",则根本不显示任何内容。那有什么不对吗?

这取决于navs的价值。我们需要查看要进行故障排除的确切代码。

如何将导航项直接提供给<nav-bar>

要将navsApp值传递给<nav-bar>,请使用v-bind

<div id="app">
  <nav-bar v-bind:navs="navs" />

  <!-- OR shorthand for v-bind -->
  <nav-bar :navs="navs" />
</div>

为什么不是第一个项目的类在创建时设置为active

DOM还没有被标记在created生命周期钩子中,因此jQuery无法找到要设置活动的元素。由于您要查询的元素是动态添加的(通过navs道具),您必须:

  1. 等到navs prop改变(而不是使用生命周期钩子)。使用watcherVue.component('nav-bar', { watch: { navs: { handler() { /* SEE NEXT STEP */ }, immediate: true, // call handler immediately in case `navs` data is already available } } })
  2. 等到元素添加到$nextTick中的DOM。 // in watch: handler() { this.$nextTick(() => { $(this).find('a').first().addClass('active'); }); },

Vue.component('nav-bar', {
  props: ['navs'],
  template: `<ul class="nav" ref="list">
        <li v-for="nav in navs"
            v-bind:item="nav"
            v-bind:key="nav.id">
          <a class="nav-link" v-on:click="setactive($event)">{{ nav.text }}</a>
        </li>
      </ul>`,
  methods: {
    setactive: function(event) {
      $(event.target).closest('ul').find('a.active').removeClass('active');
      $(event.target).addClass('active');
    },
  },
  watch: {
    navs: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          $(this.$refs.list).find('a').first().addClass('active');
        });
      }
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    navs: [{
        id: 0,
        text: 'Vegetables'
      },
      {
        id: 1,
        text: 'Cheese'
      },
      {
        id: 2,
        text: 'Milk'
      }
    ]
  }
});
.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.nav-link.active {
  color: #fff;
  background-color: #007bff;
}

.nav-link {
  color: #4183c4;
  text-decoration: none;
  background-color: transparent;
  border-radius: .25rem;
  padding: .5rem 1rem;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app">
  <nav-bar :navs="navs"></nav-bar>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.