Vue.js - динамическое прерывание ввода в IE11 - PullRequest
Новая
       66

Vue.js - динамическое прерывание ввода в IE11

1 голос
/ 23 мая 2019

Я получаю сообщение об ошибке при попытке создать динамический ввод в Vue при попытке просмотра моего приложения в IE. Страница не загружается, и я получаю «Несколько определений свойства, не разрешенных в строгом режиме».

Вход имеет атрибут v-model и: value, и имеет смысл, что для большинства ситуаций эти конфликты, однако, для нескольких флажков и переключателей атрибут необходим, чтобы определить, каким должно быть назначенное значение для v-модели.

Документы Vue даже показывают, что это правильный способ работы с массивами флажков, однако они не используют свойство динамического значения. Из-за способа использования этого компонента значение должно быть динамическим.

Вот как выглядит код абстрактно: 

<input
  v-model="questionAnswer"
  :disabled="readOnly"
  :type="type"
  :value="value"
>

Есть ли способ обойти эту ошибку в IE? Он отлично работает во всех других браузерах. Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

"Множественные определения свойств не разрешены в строгом режиме."

Эта проблема обычно возникает, когда вы устанавливаете дубликаты свойств в своем коде.

v-модель игнорируетначальные значения, проверенные или выбранные атрибуты, найденные в любых элементах формы.Он всегда будет обрабатывать данные экземпляра Vue как источник правды.Вы должны объявить начальное значение на стороне JavaScript внутри параметра data вашего компонента.

Возможно, проблема заключается в привязке: value = "value", которая может конфликтовать с v-модельюvlue.

И я хотел бы спросить, в какой строке в вашем коде отображается сообщение об ошибке?

Вот рабочий код, который может быть полезен для вашего запроса: http://jsfiddle.net/4hprbzw9/

<div id="demo">
    <div v-for="checkedvalue in NamesList">
        <input type="checkbox" :value="checkedvalue.valueselect" v-model="checkedNames" @click="check($event)" > {{checkedvalue.valueselect}}
    </div>
    <span>Checked names:{{ checkedNames }}</span>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            checkedNames: [],
            NamesList: [{
                valueselect: 'aaa'
            }, {
                valueselect: 'bbb'
            }, {
                valueselect: 'ccc'
            }]
        },
        methods: {
            check: function (e) {
                if (e.target.checked) {
                    console.log(e.target.value)
                }
            }
        }
    })
</script>

А вот справочная ссылка, которая также может вам помочь: Vue.js Множество определений свойства, не допускаемых в строгом режиме

0 голосов
/ 23 мая 2019

v-model на input делает то же самое, что и это : 

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

Так что, если вы используете v-model и :value, вы получите атрибут value дважды, который, как я подозреваю, является источником получаемой вами ошибки.

Чтобы решить эту проблему, начиная с версии 2.2.0, вы можете использовать model параметр компонента, чтобы исправить эту ситуацию:

Позволяет настраиваемому компоненту настраивать опору и событие, используемое при использовании с v-моделью. По умолчанию v-модель в компоненте использует значение в качестве реквизита и ввод в качестве события, но некоторые типы ввода, такие как флажки и переключатели, могут использовать значение проп для другой цели. Использование опции модели позволяет избежать конфликта в таких случаях.

Пример: * * один тысяча двадцать-одна 

// Component
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

// Template
<my-checkbox v-model="foo" value="some value"></my-checkbox>

// Is equivalent to
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

Поскольку вы говорите, что то, что вы опубликовали, - это то, что "код выглядит абстрактно", трудно дать точный ответ, но я думаю, что это поможет. Если нет, опубликуйте минимальный рабочий пример, показывающий вашу ошибку.

Кроме того, я протестировал пример с несколькими флажками, на который вы ссылались в IE11, и он отлично работает.

...