Question

我正在努力让我的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类到ref元素。它适用于开发构建，但在生产中它会导致：

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

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

Answer 1

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

绑定camelCased道具时必须使用烤肉串。您需要使用

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

VueJS 2属性未在生产版本中传递

1 个答案: