我有2种输入类型，firstNumber和secondNumber。并在v模型中返回firstNumber * secondNumber。然后，它在数据库中搜索该编号，当您单击“提交”时，它返回该ID“编号”的值。很好但是，我还有一个包含3个项目的选择列表。当您单击某个项目时，它会在数据库中搜索该值“ nos”，而巫婆的编号为177，然后返回该项目“ nos”的编号177，或者应该这样做，但返回NaN。
calc：”应返回ID +编号为177的项目“ nos”。calc为v-model =“ calc”。在数据中calc是calc：''，
export default {
data(){
return {
firstNumber: '',
secondNumber: '',
calc: '',
loading: false,
items: [
'nos', 'pp', 'pre'
],
selected: '',
price: '',
picked: ''
}
},
computed: {
result: function(){
return this.firstNumber * this.secondNumber
},
},
methods: {
sortBy: function(){
this.selected = ''
},
getCost: function () {
this.loading = true
this.$http.get
('https://sheetdb.io/api/v1/zxl0nnytr1z32/search?m2=' +
this.result).then((costType) => {
this.calc = costType.data[0].
sortBy * this.result * 2 + 'Kr.'
this.loading = false
当我拿this.calc = costType.[0].nos时，我得到了号码。但是，当我有sortBy时，它将返回NaN。 this.selected是您在选择列表中选择的内容。当您选择no时，this.selected = 'nos'应该与costType.[0].nos相同，但不会相同。
这是我的完整代码：
<template>
<div>
<v-app id="inspire">
<div id="e3">
<v-card>
<img src="../assets/measurementBG.jpg" alt="">
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<span class="headline" style="color: black">Takmått</span>
</v-flex>
</v-layout>
</v-container>
<v-flex xs12 sm6 md1>
<v-text-field
label="Solo"
single-line
solo
></v-text-field>
</v-flex>
-->
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12>
<v-card color="white" class="black--text">
<v-card-title primary-title>
<v-select box white
v-model="selected"
v-on:change="sortBy"
:items="items"
item-value="text"
color="dark"
label="Välj taktyp.."
></v-select>
<v-text-field solo
mask="######"
label="Längd"
id="firstNumber"
v-model="firstNumber"
class="whatevercolor--text"
color="dark"
messages ='Avrunda till meter'
></v-text-field>
<v-text-field solo
mask="#####"
label="Bredd"
id="secondNumber"
v-model="secondNumber"
color="dark"
messages='Avrunda till meter'
></v-text-field><br>
<v-text-field
class="result"
v-model="result"
color="dark"
messages='m2/sida'
style="margin-top: 1rem;"
></v-text-field>
<v-text-field
class="calculate"
v-model="calc"
color="dark"
messages='Priser exkl. moms med f.n. 25%.'
></v-text-field>
</v-card-title>
<v-card-actions>
<v-btn :loading="loading" :disabled="loading" color="blu-
grey" class="white--text"
@click="getCost">Hämta pris
<v-icon right dark>cloud_download</v-icon>
</v-btn>
{{ calc }}
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</div>
</v-app>
</div>
</template>
<script>
export default {
data(){
return {
firstNumber: '',
secondNumber: '',
calc: '',
loading: false,
items: [
'nos', 'pp', 'pre'
],
selected: '',
price: '',
picked: ''
}
},
computed: {
result: function(){
return this.firstNumber * this.secondNumber
},
},
methods: {
sortBy: function(){
this.selected= ''
},
getCost: function () {
this.loading = true
this.$http.get('https://sheetdb.io/api/v1/zxl0nnytr1z32/search?m2=' +
this.result).then((costType) => {
console.log(costType.body);
const roof = this.value;
console.log(roof);
this.price = costType.data[0].roof
this.calc = costType.data[0].sortBy * this.result * 2 + ' Kr.'
this.loading = false
console.log(costType.data[0].roof);
console.log('Pris: ' + roof);
console.log('Tak: ' + roof);
console.log('Summa: ' + this.calc);
console.log('Pris: ' + costType.data[0].selected);
});
}
}
}