1
Firefox、Chrome、Safari、Safariのモバイルブラウザでうまく動作するVue.jsコンポーネントがあります。Vue.js Safariモバイルと互換性
コンソールに戻ります：
Object.valuesは機能
ではありません。この問題の解決策はありますか？
完全なコードは以下の通りです：
<template>
<div>
<div v-for="(meal, i) in meals">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-sm-3">
<img v-bind:src="all[i].image" class="img-circle" alt="Chicken" width="130px" height="130px">
</div>
<div class="col-sm-5">
<div class="col-xs-12">
<h3>{{meal}}</h3>
</div>
</div>
<div class="col-sm-4" id="order_select">
<select v-model="selected" v-model.lazy="creditsPerMeal[meal]" v-on:change="createSelection()">
<option v-for="option in options" v-bind:value="option">
{{ option }}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<p>Credits used: {{creditsSum}}/{{credits}}</p>
</div>
<label>Dietary</label>
<input type="textarea" name="dietary" v-model="dietary" class="form-control">
<div class="col-xs-12">
<div id="buy_now">
<p>PRICE: £{{cost}}</p>
<form action="/checkout" v-on:submit.prevent="onSubmit" method="post" id="buy_now_form">
<input type="hidden" v-bind:value="select_meal" name="selected_meals" required>
<input type="hidden" name="price" v-bind:value="cost">
<input type="submit" value="BUY NOW" class="btn btn-default" :disabled="this.creditsSum != this.credits">
</form>
</div>
</div>
<div class="col-xs-12" v-if="this.credits==='10'">
<div id="subscribe_now">
<p>Subscribe</p>
<label>4 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="fourWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
<label>8 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="eightWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
</div>
</div>
<div class="col-xs-12" v-if="this.credits==='12'">
<div id="subscribe_now">
<p>Subscribe</p>
<label>4 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="fourWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
<label>8 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="eightWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
</div>
</div>
<div class="col-xs-12" v-if="this.credits==='15'">
<div id="subscribe_now">
<p>Subscribe</p>
<label>4 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="fourWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
<label>8 Weeks</label>
<button type="submit" class="btn btn-default" v-on:click="eightWeek" :disabled="this.creditsSum != this.credits">SUBSCRIBE</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
console.log('Component ready.');
console.log(JSON.parse(this.f));
console.log(JSON.parse(this.a));
},
props: ['f','c', 'a'],
name: 'credits',
data: function() {
var meals = JSON.parse(this.f)
var all = JSON.parse(this.a)
var creditsPerMeal = {}
for (var i = 0; i < meals.length; i++) {
creditsPerMeal[meals[i]] = 0
}
return {
credits: this.c,
meals,
options: [1,2,3,4,5,6,7,8,9,10],
select_meal: [],
creditsPerMeal,
all,
dietary: "",
}
},
computed: {
creditsSum() {
return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
},
cost: function() {
return this.cost = this.credits * 6;
},
},
methods: {
onSubmit() {
axios.post('/check', {
selected_meals: this.select_meal,
dietary: this.dietary,
price: this.cost
})
.then(function(response) {
window.location = "/checkout";
})
.catch(function(error) {
console.log(error);
});
},
createSelection: function(){
this.select_meal = [];
for (var i = 0; i < JSON.parse(this.f).length; i++) {
this.select_meal.push({
food: JSON.parse(this.f)[i],
quantity: this.creditsPerMeal[JSON.parse(this.f)[i]]
});
}
},
fourWeek: function() {
axios.post('/sub', {
selected_meals: this.select_meal,
package: 4,
credits: this.credits
})
.then(function(response) {
window.location = "/subscribe";
})
.catch(function(error) {
console.log(error);
});
},
eightWeek: function() {
axios.post('/sub', {
selected_meals: this.select_meal,
package: 8
})
.then(function(response) {
window.location = "/subscribe";
})
.catch(function(error) {
console.log(error);
});
},
}
}
</script>
おかげを使用し、私はポリフィルを使用したことがありません。私はhttps://github.com/es-shims/Object.valuesで提供されたコードをファイルに追加し、スクリプトタグを使ってそれを持ってきました。これは動作していないため、適切な方法です。 –
@JamesParsons私は私の答えをより明確に編集しました。これはあなたのために働くことを望みます。 – JJJ