VueJS 2 属性未在生产构建中传递答案

【问题标题】：VueJS 2 properties not being passed down in production buildVueJS 2 属性未在生产构建中传递
【发布时间】：2017-05-09 08:48:00
【问题描述】：

我正在努力让属性在我的 Vue 应用程序的生产版本中工作。一切似乎在开发中都可以正常工作，但是在编译应用程序时却不行。以我正在使用的这个导航组件为例：

navigation.js：

import Vue from 'vue';
import template from './navigation.html';

export default Vue.extend({
  props: ['activePage'],
  template,
  methods: {
    setActivePage: function() {
      // Set activeEl to ref (see template) that corresponds to activePage parameter
      var activeEl = this.$refs[this.activePage];
      if (activeEl) {
        activeEl.className += ' active';
      }
    }
  },
  mounted: function() {
    this.setActivePage();
  }
});

navigation.html：

<div class="container">
    <nav class="navigation">
        <div class="navigation__bar">
            <router-link to="/"><img class="navigation__brand" src="placeholder" /></router-link>

            <ul class="navigation__links">
                <li class="navigation__link" ref="a"><router-link to="/">a</router-link></li>
                <li class="navigation__link" ref="b"><router-link to="/b">b</router-link></li>
                <li class="navigation__link" ref="c"><router-link to="/c">c</router-link></li>
            </ul>
        </div>
    </nav>
</div>

这就是我使用这个组件的方式：
<navigation activePage="a"></navigation>

因此，该组件采用activePage 属性，检查模板是否存在与activePage 值对应的引用，如果为真，则将active 类添加到引用元素。它适用于开发版本，但在生产中会导致：

<div class="container" activepage="cases">

我在这里做错了吗？我的项目基于这个模板，如果这很重要：https://github.com/villeristi/vue.js-starter-template

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

看看https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

绑定camelCased props时必须使用kebab case。您将需要使用

<navigation active-page="a"></navigation>

【讨论】：