Почему не передается value из option?

Question

[FlooDwm]

Компонент

<template>
           <div class="form-group">
                   <label>Специализация</label>
                <select class="form-control select2bs4" style="width: 100%;" v-model="pr">
                  <option selected="selected" value="1">Стиралки</option>
                  <option value="2">Посудомойки</option>
                  <option value="3">Холодильники</option>
               </select>
              <button type="submit" class="btn btn-block btn-success" @click="submitIt">Начать Сбор</button>
          </div>
</template>

<script>
    export default {
    name: 'reviews-component',
        data(){
            return{
                pr: null
            }
        },
        methods : {
            submitIt: function () {
                console.log(this.pr)
            }
        }
    }
</script>

Почему null??
v-model должно обеспечивать присвоение при изменении.

Comments

[andrei_pro]

Сделайте pr: '1' по дефолту, selected не связанно с pr

[FlooDwm]

andrei_pro Возможно я не корректно задал вопрос. Мне надо чтобы при выборе разных option pr присваивалось то value которое в option. Если я просто по дефолту поставлю p: '1' то он и будет мне всегда выводить в консоле 1. Чтобы я не выбрал.

Answer 1

[Юрий Кулаксыз]

Comments

[FlooDwm]

ок. а как сделать чтоб при выборе из select присваивался параметр из option value

[Юрий Кулаксыз]

FlooDwm, да он и так присваивается ПРИ ВЫБОРЕ, просто задайте pr: '1'

[FlooDwm]

Юрий Кулаксыз Возможно я не корректно задал вопрос. Мне надо чтобы при выборе разных option pr присваивалось то value которое в option. Если я просто по дефолту поставлю p: '1' то он и будет мне всегда выводить в консоле 1. Чтобы я не выбрал.

[Юрий Кулаксыз]

FlooDwm, https://jsfiddle.net/1snug37q/

[FlooDwm]

Юрий Кулаксыз вы будете смеяться, но не работает это!
а на выходе я изменяю свойство select а он мне выдает тоже самое 1, что бы я не выбирал всегда подпихивает дефолтное значение 1

[Юрий Кулаксыз]

FlooDwm, npm run watch запускали? Возможно, у вас монтируется старая версия компонента.

[FlooDwm]

Юрий Кулаксыз, watch запущен, все пересобирается нормально.
На самом деле все начинает работать если я уберу class="form-control select2bs4" вот это из select. Но это еще больше ломает мой мозг почему это влияет.

КАК СТИЛИ МОГУТ влиять на vue не понимаю. Как только я добавлю этот класс все перестает рабоать )) что это такое не понимаю.

[Юрий Кулаксыз]

FlooDwm, как я понял вы в Phpstorm работаете. ctrl + shift + F запустит глобальный поиск и вставьте там этот класс select2bs4, похоже, что его какой-то скрипт использует сторонний.

[FlooDwm]

Юрий Кулаксыз, ну да он на странице использует jquery для инициализации некоторых параметров select. Но а как мне и скрипт запустить и чтоб vue работал?

[Юрий Кулаксыз]

FlooDwm, там скорее всего этот скрипт меняет сам html, откройте в панели разработчика код и сравните со своим, скорее всего, Vue не видит селекта, потому что его попросту нет в DOM.

[Mr. Grump]

FlooDwm, отказаться от jquery вообще. Либо используйте vue либо пишите на jquery. Равносильно что развернуть симфони с ларавелем в один проект и удивляться почему миграции конфликтуют

[FlooDwm]

Mr. Grump, Не равносильно. Я подключил стороннюю библиотеку для админки, с необходимыми формами она подтягивает jquery и это нормально. Путем правки пары строк кода теперь работает и формы и vue, и прекрасно работает. А самому писать пришлось бы НАМНОГО дольше.