javascript - Vue.js Safari 移动和兼容性

Question

我有一个 Vue.js 组件，它在 Firefox、Chrome 上运行良好，但在 Safari 和 Safari 移动浏览器上运行失败。

控制台返回:

Object.values is not a function

这个问题有解决办法吗？

完整代码如下:

<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

并在您的代码开头使用

从“object.values”导入值；

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