使文本转到新文本

Question

所以我真的不知道怎么说，但我正在尝试创建一个序列，当有人点击三个按钮中的一个时，他们按下按钮后就会转到新文本。问题是我不知道该怎么开始。我是否需要创建另一个模板，或者我是否可以使用我正在使用的模板？HTML：

<div id="app">

    <barista-template></barista-template>
</div>


    <!--template for customer-->
<script type="text/x-template" id="b-template">
    <div>
        <div>{{showText}}</div>
        <button v-on:click="choose('drip')">Drip</button>
        <button v-on:click="choose('frenchpress')">French Press</button>
        <button v-on:click="choose('aeropress')">Aeropress</button>
    </div>
</script>

<script type="text/x-template" id="c-template">
    <div>
        <div>{{showText2}}</div>
    </div>
</script>


<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>

JS

Vue.component("customer-template",{
   template:"#c-template",
    data:function (){
       return{
           order_type:"",
       }
    },
    computed:{
        showText2 (){
            if(this.order_type === '') return '';
            return 'waiting for' + this.order_type
        }

    }
});
Vue.component("barista-template",{
    template: "#b-template",
    data: function () {
        return{
            order_type:"",
            order_value: "",
        }
    },
    computed: {
        showText () {
            if(this.order_type === '') return '';
            return 'One ' + this.order_type + ' that would be ' + this.order_value
        }
    },
    methods: {
        choose: function (order_type) {
            this.order_type = order_type;

            if (this.order_type == "drip") {
                this.order_value = "$10";
            }
            if (this.order_type == "frenchpress") {
                this.order_value = "$20";
            }
            if (this.order_type == "aeropress") {
                this.order_value = "$30";
            }
        }
    },
});
new Vue ({
    el:"#app",
    data:function () {
        return{
            showing:true
        }
    }
});

Answer 1

这是你需要的吗？一个模板和我添加了新属性

​

Vue.component("barista-template",{
    template: "#b-template",
    data: function () {
        return{
            order_type:"",
            order_value: "",
        }
    },
    computed: {
        showText () {
            if(this.order_type === '') return '';
            return 'One ' + this.order_type + ' that would be ' + this.order_value
        },
        showText2 (){
            if(this.order_type === '') return '';
            return 'waiting for ' + this.order_type
        }
    },
    methods: {
        choose: function (order_type) {
            this.order_type = order_type;

            if (this.order_type == "drip") {
                this.order_value = "$10";
            }
            if (this.order_type == "frenchpress") {
                this.order_value = "$20";
            }
            if (this.order_type == "aeropress") {
                this.order_value = "$30";
            }
        }
    },
});
new Vue ({
    el:"#app",
    data:function () {
        return{
            showing:true
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>


<div id="app">
    <barista-template></barista-template>
</div>




    <!--template for customer-->
<script type="text/x-template" id="b-template">
    <div>
        <div>{{showText}}</div>
        <button v-on:click="choose('drip')">Drip</button>
        <button v-on:click="choose('frenchpress')">French Press</button>
        <button v-on:click="choose('aeropress')">Aeropress</button>
        <div>{{showText2}}</div>
    </div>
</script>

<script type="text/x-template" id="c-template">
    <div>
        <div>{{showText2}}</div>
    </div>
</script>

​