Vue v-model проблема с привязкой данных - PullRequest
Новая
       42

Vue v-model проблема с привязкой данных

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

У меня есть пара стандартных переключателей Bootstrap, и я хотел, чтобы v-model устанавливал значение в объекте данных vue при его выборе.

Это прекрасно работает в JSfiddle , однако это не работает при локальном запуске в моей среде.

Я могу заставить другие директивы работать нормально, например, v-if, но v-модель, похоже, совсем не работает.

В консоли ничего не появляется, а при использовании vue dev tools extension;Я вижу, что «тестовый» объект никогда не обновляется, когда выбрана одна из переключателей.

Я использую последнюю версию начальной загрузки, jquery и версию для разработки vue. 

<div class="container margin-top-rem" id="app">       
        <div class="row">
            <div class="col-12">
                <div class="card text-center" v-if="testIf">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active card-body-padding">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="false" />false
                                            </label>
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="true" />true
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>test value is {{testVModel}}</div>
            </div>
        </div>
    </div>
 var app = new Vue({
   el: '#app',
   data: {
     testIf: 'blah',
     testVModel: ''
   }
 })

1 Ответ

0 голосов
/ 25 мая 2018

Похоже, что это конфликт между начальной загрузкой и Vue.

Два варианта разрешения:

1) Использовать Bootstrap-vue

2) Удалить данные-toggle = "buttons" 'из: 

<div class="btn-group-toggle" data-toggle="buttons">
...