Vue.js Safari mobile и совместимость

Question

У меня есть компонент Vue.js, который отлично работает на Firefox, Chrome, но в браузерах Safari и 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> 

Answer 1

Проблема заключается в Object.values, который не поддерживается всеми браузерами. Вы можете использовать polyfill for Object.values для получения поддержки.

Вы можете проверить для получения дополнительной информации this website

редактировать:

Я вижу, что вы используете import в вашем коде. что облегчает жизнь.

использование npm install object.values

и в коде в начале использования

import values from 'object.values';

if (!Object.values) { values.shim(); }

Answer 2

Это не имеет ничего общего с Vue.js.

Object.values() является экспериментальным и не реализован во многих браузерах. См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Вместо этого вам понадобится цикл for!