使用vue我的生命周期方法有问题。似乎我的咖啡完成变量没有出现。我不知道我是否真的传递了正确的变量来让它显示出来。此外，当我点击其他按钮时，由于某些奇怪的原因我得到了未定义，但只有当我点击三个按钮上的多个时间时
const DrinkName = new Vue({});
const coffeeFinished = new Vue({});
Vue.component("customer-component",{
template: `
<div>
<button v-on:click="choose('drip brew')">Drip brew</button>
<button v-on:click="choose('frenchpress')">French Press</button>
<button v-on:click="choose('aeropress')">Aeropress</button>
</div>
`,
props: ['order_type'],
data: function () {
return{
order_type:"",
order_value: "",
drink: "",
showButtons: true,
orderAgain: false,
}
},
methods:{
choose(val) {
this.order_type = val;
if (val == "drip brew") {
this.order_value = "$5.10";
}
if (val == "frenchpress") {
this.order_value = "$8.75";
}
if (val == "aeropress") {
this.order_value = "$7.00";
}
DrinkName.$emit('customerOrdered', this.order_type, this.order_value)
}
}
}); // end of customer-component
Vue.component("barista-component",{
props: ['order_type','order_value'],
template:`
<div>
<transition name="fade">
<div order_type="order_type" order_value="order_value" v-if="order_type">
One {{order_type}}, that will be {{order_value}}.
</div>
</transition name="fade">
<transition>
<div v-if="drink">{{ drink }}</div>
</transition>
</div>
`,
data:function() {
return {
order_type: "",
order_value: "",
drink: "",
message:""
}
},
// Start of lifecycles
created() {
DrinkName.$on('customerOrdered', (myDrink,myPrice) => {
this.order_type = myDrink;
this.order_value = myPrice;
});
},
beforeUpdate: function () {
this.brewingDrink(this.order_type);
},
updated: function() {
this.drink = "";
},
methods: {
brewingDrink(val) {
setTimeout(() => {
this.drink = 'waiting for ' + val;
}, 1000);
coffeeFinished.$on('brewingcomplete', (mymessage,myDrink) =>{
this.order_type = myDrink;
this.message = 'here is your ' + this.order_value + ' , enjoy'
})
}
},
}); // end of barista-component
// start of the machine component
Vue.component("machine-component", {
props: ['order_type', 'order_value'],
template: `
<div>
<transition name="fade2">
<div order_type="order_type" v-if="order_type">
{{message}}
</transition name="fade">
</div>
</div>
`,
data: function () {
return {
order_type: "",
order_value: "",
drink: "",
message: ""
}
},
created: function () {
DrinkName.$on('customerOrdered', (myDrink) => {
this.order_type = myDrink;
this.message = 'Currently brewing ' + this.order_type;
this.brewingComplete(this.order_type);
});
},
methods: {
brewingComplete(val) {
setTimeout(() => {
this.message = val + ' is done';
}, 2500); // 10 seconds
coffeeFinished.$emit('brewingcomplete', false)
},
}
}); // end of machine-component
new Vue ({
el:"#app",
data:function () {
return {
showing: true
}
},
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cafe</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<!--user facing component -->
<div id="app">
<h1>How may I help you today </h1>
<div id="customer">
<customer-component>
</customer-component>
</div>
<div id="barista">
<barista-component>
</barista-component>
</div>
<machine-component>
</machine-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="JS/app.js"></script>
</body>
</html>
答案 0 :(得分：0)
我不确定你想要展示什么。
但我会code pen demo试图解决您的问题。
const DrinkName = new Vue({});
const coffeeFinished = new Vue({});
Vue.component("customer-component",{
template: `
<div>
<button v-on:click="choose('drip brew')">Drip brew</button>
<button v-on:click="choose('frenchpress')">French Press</button>
<button v-on:click="choose('aeropress')">Aeropress</button>
</div>
`,
props: ['order_type'],
data: function () {
return{
order_type:"",
order_value: "",
drink: "",
showButtons: true,
orderAgain: false,
}
},
methods:{
choose(val) {
this.order_type = val;
if (val == "drip brew") {
this.order_value = "$5.10";
}
if (val == "frenchpress") {
this.order_value = "$8.75";
}
if (val == "aeropress") {
this.order_value = "$7.00";
}
DrinkName.$emit('customerOrdered', this.order_type, this.order_value)
}
}
}); // end of customer-component
Vue.component("barista-component",{
props: ['order_type','order_value'],
template:`
<div>
<transition name="fade">
<div order_type="order_type" order_value="order_value" v-if="order_type">
One {{order_type}}, that will be {{order_value}}.
</div>
</transition name="fade">
<transition>
<div v-if="drink">{{ drink }}</div>
<div v-if="message">{{ message }}</div>
</transition>
</div>
`,
data:function() {
return {
order_type: "",
order_value: "",
drink: "",
message:""
}
},
// Start of lifecycles
created() {
DrinkName.$on('customerOrdered', (myDrink,myPrice) => {
this.order_type = myDrink;
this.order_value = myPrice;
});
},
beforeUpdate: function () {
this.brewingDrink(this.order_type);
},
updated: function() {
this.drink = "";
},
methods: {
brewingDrink(val) {
setTimeout(() => {
this.drink = 'waiting for ' + val;
}, 1000);
coffeeFinished.$on('brewingcomplete', (mymessage,myDrink) =>{
this.order_type = myDrink;
this.message = 'here is your ' + this.order_value + ' , enjoy'
})
}
},
}); // end of barista-component
// start of the machine component
Vue.component("machine-component", {
props: ['order_type', 'order_value'],
template: `
<div>
<transition name="fade2">
<div order_type="order_type" v-if="order_type">
{{message}}
</transition name="fade">
</div>
</div>
`,
data: function () {
return {
order_type: "",
order_value: "",
drink: "",
message: ""
}
},
created: function () {
DrinkName.$on('customerOrdered', (myDrink) => {
this.order_type = myDrink;
this.message = 'Currently brewing ' + this.order_type;
this.brewingComplete(this.order_type);
});
},
methods: {
brewingComplete(val) {
setTimeout(() => {
this.message = val + ' is done';
coffeeFinished.$emit('brewingcomplete', false)
}, 10000); // 10 seconds
},
}
}); // end of machine-component
new Vue ({
el:"#app",
data:function () {
return {
showing: true
}
},
});
你可以检查出来。我们可以帮助：）