I'm trying to create a modal that will give you a price of a t-shirt size based on what you have selected. The issue I'm having is that after grabbing all the data that I need in order to get the size and price it isn't showing up in my modal.

So what needs to happen is that I would select a size and then vue would send the size to the backend and the backend will do it's thing and send it over to vue and then it should display in the textbox.

Here is my code

<template>
    <div>
        <div ></div>
            <div  style="display: inline;">
                <div  role="document">
                    <div >
                        <div >
                            <h5 >Choose T-Shirt Size</h5>
                                <button type="button"  @click="close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <div >
                                <div >
                                    <div >
                                        <div >
                                            <div >
                                                <select  v-model="content.size" @change="tshirtPrice">
                                                    <option value="S">S</option>
                                                    <option value="M">M</option>
                                                    <option value="L">L</option>
                                                    <option value="XL">XL</option>
                                                    <option value="XXL">XXL</option>
                                                    <option value="XXXL">XXXL</option>
                                                </select>
                                            </div>
                                        
                                            <div >
                                                <input type="text"  v-model="content.price">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div >
                    <button type="button"  @click="close">Cancel</button>
                    <button type="button"  style="float: right">Submit</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['product'],
        data() {
            return {
                content: {},
            }
        },
        computed: {

        },
        methods: {
            close() {
                this.$emit('close');
            },
            tshirtPrice(){
                axios.post(`/api/products/tshirt/prices`, {
                    'size': this.content.size
                }).then(response => {
                    this.content.size = response.data.size;
                    this.content.price = response.data.price;
                });
            }
        },
        mounted(){
            this.content = this.product;
        }
    }
</script>

When I console.log() my response this is what I get

data:
    size: "S"
    price: 100

CodePudding user response：

It looks like your code is working fine. Make sure the response has the proper shape, I tested your code here and replaced the API with mock data, and it's working fine.

CodePudding user response：

As user can select one size at a time. You can directly show that price instead of do any comparisons/conditions.

new Vue({
  el: '#app',
  data: {
    size: "S",
    price: 100
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>Price of the size selected is Rs.{{ price }}</p>
</div>