Флажок Vue на Монтируется не работает в Edge - PullRequest
Новая
       15

Флажок Vue на Монтируется не работает в Edge

0 голосов
/ 22 марта 2019

Я работаю над страницей Vue, на которой есть флажок, который после монтирования должен прочитать значение из файла cookie и установить флажок, если это необходимо.Я заметил, что в браузере Edge он не устанавливается правильно, хотя Mounting определенно вызывается.

Я разобрал эту проблему до следующего наименьшего примера.Если вы откроете его в Edge и нажмете «Обновить», вы увидите, что когда-нибудь его не проверяли.Где, как в Chrome / IE11, это всегда так.

Есть ли какие-либо предложения относительно того, что вызывает это и как это исправить? 

<!DOCTYPE html>
<html>
<head>
  <title>Vue / Edge Checkbox Issues</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <p>This checkbox should become checked on mounted. Hit refresh and see what happens in MS Edge.</p>
    <label>
        <input type="checkbox" name="remember" v-model="remember">
      <span>Remember Me</span>
    </label>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        remember: false
      },
      methods : {
        check () {
          this.remember = true
        }
      },
      // Hooks
      mounted () {
        this.check()
      }
    })
  </script>
</body>
</html>

edit: I didn 'Не стоит упоминать об этом ... но стоит отметить, что перенос this.check() в setTimeout позволяет ему работать, но для меня требуется, чтобы задержка составляла> 60. Так что это исправляет, но, очевидно, действительно взломано ине нужно. 

mounted () {
  setTimeout(() => {
    this.check()
  }, 120)
}

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Не могли бы вы попробовать этот код (у меня нет края для тестирования)? 

  var app = new Vue({
      el: '#app',
      data: {
        remember: false
      },
      methods: {
        check: function () {
          this.remember = true
        }
      },
      // Hooks
      mounted: function () {
        this.check()
      }
    })
0 голосов
/ 22 марта 2019

Теперь я немного догадываюсь.

v-модель - это короткая запись для входного события. Но собственный флажок выдает событие изменения при нажатии.

Если я прав с этим, то должно работать следующее: 

<input type="checkbox" name="remember" :checked="remember ? 'checked': '' @change=remember = !remember">

Обновление: Также измените свою часть данных на: 

data () {
  return {
    remember: false
  }
}

В противном случае он может помешать другим экземплярам этого компонента.

...