javascript - 为按钮组创建一个 vue.js 组件

Question

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

$(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按钮组。

Answer 1

if changing <li v-for="nav in [{id: 0, text: 'Vege'}, {id:1, text: 'Ch'}]" to <li v-for="nav in navs", nothing is displayed at all. Whats wrong with that?

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

how can the nav items be given directly to <nav-bar>?

传递navs的值来自 App至 <nav-bar> , 使用 v-bind :

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

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

why isn't the first item's class set to active upon creation?

DOM 尚未在 created 中标记生命周期 Hook ，因此 jQuery 无法找到要设置为事件的元素。由于您查询的元素是动态添加的(通过 navs 属性)，您必须:

1. 等到 navs Prop 更改(而不是使用生命周期钩子(Hook))。使用watcher为此:

   Vue.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>