在vue中选择后未填充文本输入

Question

我正在尝试创建一个模式，根据您选择的t恤尺寸为您提供价格。我遇到的问题是，在获取了我需要的所有数据以获得尺寸和价格后，它不会出现在我的模态中。

所以需要做的是，我会选择一个大小，然后vue会将大小发送到后端，后端会做它的事情，并将其发送到vue，然后它应该显示在文本框中。

这是我的代码

<template>
<div>
<div class="modal-backdrop show"></div>
<div class="modal" style="display: inline;">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Choose T-Shirt Size</h5>
<button type="button" class="close" @click="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<select class="form-control" 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 class="col-lg-3">
<input type="text" class="form-control" v-model="content.price">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="close">Cancel</button>
<button type="button" class="btn btn-success mr-3" 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>

当我console.log()我的响应时，这就是我得到的

data:
size: "S"
price: 100

Answer 1

看起来您的代码运行良好。确保响应具有正确的形状，我在这里测试了您的代码，并用mock数据替换了API，它运行良好。

Answer 2

因为用户一次可以选择一个尺寸。您可以直接显示该价格，而不用进行任何比较/条件。

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>