Vue.js Safari 모바일 및 호환성

Vue.js Safari 모바일 및 호환성

나는 Firefox, Chrome에서 잘 작동하는 Vue.js 구성 요소를 가지고 있지만 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>

문제는 에 있다.Object.values모든 브라우저에서 지원되지 않는 기능Object.values에 대한 폴리필을 사용하여 지원을 받을 수 있다.

이 웹사이트에서 더 많은 정보를 확인할 수 있다.

편집:

나는 당신이 사용하는 것을 안다.import네 코드로 말이야 그게 상황을 더 쉽게 만들었어

사용하다npm install object.values

처음 사용 시 코드에서

import values from 'object.values';

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

이건 Vue.js와 아무 상관 없어.

Object.values()실험적이고 많은 브라우저에서 구현되지 않는다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values을 참조하십시오.

a를 사용해야 할 것이다.for대신 루프!

참조URL: https://stackoverflow.com/questions/42009462/vue-js-safari-mobile-and-compatibility