Ich habe Probleme mit der Erstellung von Eigenschaften für die Produktion meiner Vue App. Alles scheint in der Entwicklung gut zu funktionieren, aber wenn die App kompiliert wird, tut es das nicht. Nehmen Sie diese Navigationskomponente ich zum Beispiel mit:VueJS 2 Eigenschaften werden nicht in der Produktion weitergegeben Build
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>
Dies ist, wie ich diese Komponente verwenden:
<navigation activePage="a"></navigation>
S o, diese Komponente nimmt eine activePage Eigenschaft, prüft die Vorlage, wenn es eine Ref gibt, die dem activePage Wert entspricht, und wenn das wahr ist, fügt sie die active Klasse zum ref Element hinzu. Es arbeitet mit der Entwicklung bauen, aber es ergibt sich dies in der Produktion:
<div class="container" activepage="cases">
Bin ich etwas falsch zu machen hier? Mein Projekt ist auf dieser Vorlage basieren, wenn es ankommt: https://github.com/villeristi/vue.js-starter-template