У меня есть 2 типа ввода, firstNumber и secondNumber.И он возвращает firstNumber * secondNumber в v-модели.И затем он ищет этот номер в базе данных, и когда вы нажимаете кнопку «Отправить», он возвращает значение этого идентификатора «номер».Это отлично работает.Но у меня также есть список выбора с 3 пунктами.Когда вы щелкаете по элементу, он ищет это значение "nos", у которого есть номер 177 в базе данных, а затем возвращает число 177 этого элемента "nos", или он должен сделать это, но возвращает NaN.
calc: '' - это то, что должно возвращать ID + элемент "nos" с номером 177. И calc это v-model = "calc".И в data 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 - это то, что вы выбираете в списке выбора.Когда вы выбираете nos, 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);
});
}
}
}