0
現在作業しているサイトはDrupal 7でビルドされています。私はVueJSでビルドしようとしているので、ユーザー入力が必要なフォームが1つあります。フォームは1つのテンプレートファイル（.tpl.php）内にすべて含まれ、すべてのコンテンツはこのテンプレートファイルまたはVueJS Javascriptを使用して提供されます（CMSからのものは何もありません）。VueJSコンポーネントはフロントエンドでレンダリングされません（おそらくDrupalの問題）
Vueコンポーネントはフロントエンドでレンダリングされませんが、JSFiddleにコードをコピーするとVueJSとDrupalの間のやりとりに問題があると思います。 ...
を検査する際にここに私のマークアップのスクリーンショットはここ.tpl.phpファイルからコードがある...
<div id="app">
<form>
<div>
<label for="year">Per Year</label>
<input type="radio" name="frequency" id="year" value="year" v-model="frequency" checked>
<label for="month">Per Month</label>
<input type="radio" name="frequency" id="month" value="month" v-model="frequency">
</div>
</form>
<ul class="plans">
<template id="plan-component">
<h2 class="plan-name">{{ name }}</h2>
<h2 class="plan-cost">{{ price }}</h2>
<h2 class="plan-tagline">{{ tagline }}</h2>
<a href="#" v-on:click="makeActivePlan($event)" class="select-plan button">Choose this plan</a>
</template>
<li>
<plan-component :frequency="frequency"
name="Basic"
tagline="Basic tagline"
price-yearly="Free"
price-monthly="Free"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Rec"
tagline="Rec tagline"
price-yearly="3"
price-monthly="4"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Team"
tagline="Team tagline"
price-yearly="4"
price-monthly="5"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Club"
tagline="Club tagline"
price-yearly="5"
price-monthly="6"
></plan-component>
</li>
</ul>
</div>
は私のJSからコードを..andファイル...
Vue.component('plan-component', {
template: '#plan-component',
props: ['frequency', 'name', 'tagline', 'priceYearly', 'priceMonthly'],
computed: {
'price': function() {
if (this.frequency === 'year') {
return this.priceYearly;
} else {
return this.priceMonthly;
}
}
},
methods: {
makeActivePlan() {
// We dispatch an event setting this to become the active plan
this.$dispatch('set-active-plan', this);
}
}
});
new Vue({
el: '#app',
data: {
frequency: 'year',
activePlan: {name: 'no', price: 'You must select a plan!' }
},
events: {
'set-active-plan': function(plan) {
this.activePlan = plan;
}
},
});
そして、ここでは、正しくコンポーネントを出力JSFiddleある - https://jsfiddle.net/2xgrpLm6/
コンソールにエラーがありますか？ – asemahle
いいえ、間違いなしです。 – GuerillaRadio