jQuery and Materialize not update VueJS select value

Я работаю над этой проблемой в течение нескольких часов, и это действительно есть у меня. Когда я использую комбинацию Materialize/jQuery и VueJS, выберите makea, а затем я попытаюсь выбрать нужное значение, VueJS не обновляется, чтобы отображать новое значение, которое выбрано. Я считаю, что это вопрос материализации; однако я не могу получить значение для запуска события обновления/изменения вообще для VueJS.jQuery and Materialize not update VueJS select value

У меня есть фрагмент ниже. То, что я ищу, чтобы сделать, это просто есть выбор (или любые выберите VueJS обновления правильно, когда обновляется JQuery. Это начинает казаться невозможным, даже если я знаю, что лучше.

$('select').material_select(); 
 
$(document).on('change', function(e){ 
 
\t $('#live').text("\n Using JUST jquery... Notice that the vue option remains unchanged\n" + JSON.stringify({ 'selectShouldBe': $(e.target).val()}, null, ' ')); 
 
}); 
 
new Vue({ 
 
    el: '.container', 
 

 
    data: { 
 
\t 'select':'' 
 
    }, 
 
    methods: { 
 
\t updateThing: function(){ 
 
\t \t console.log(this); 
 
\t } 
 
    }, 
 
})

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <!-- here is the select in question --> 
 
    <select id='jurisdiction' v-model='select' @change="updateThing"> 
 
     <option value disabled selected>Please select a value.</option> 
 
     <option value='1'>One</option> 
 
     <option value='2'>Two</option> 
 
     <option value='3'>Three</option> 
 
     <option value='4'>Four</option> 
 
    </select> 
 
    <!-- Print out the data, then pass it through json for easier readability. --> 
 
    <pre> 
 
{{$data|json}} 
 
     <div id="live"></div> 
 

 
     </pre> 
 
    </div> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.min.js"></script> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-12-23 Austin Kregel

Хотя это может быть не идеальное решение, оно может обойти перегрузку Materializecss выбранного элемента.

Это в основном сшивает их вместе.

$('select').material_select(); 
 
$(document).on('change', function(e){ 
 
\t $('#live').text("\n Using JUST jquery... Notice that the vue option remains unchanged\n" + JSON.stringify({ 'selectShouldBe': $(e.target).val()}, null, ' ')); 
 
}); 
 
var myVue = new Vue({ 
 
    el: '.container', 
 

 
    data: { 
 
\t select:'' 
 
    }, 
 
    methods: { 
 
\t updateThing: function(){ 
 
\t \t console.log(this); 
 
\t } 
 
    }, 
 
}); 
 
$('#jurisdiction').change(function(){ myVue.$set('select', $('#jurisdiction').val()); });

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <!-- here is the select in question --> 
 
    <select id='jurisdiction' v-model='select' @change="updateThing"> 
 
     <option value disabled selected>Please select a value.</option> 
 
     <option value='1'>One</option> 
 
     <option value='2'>Two</option> 
 
     <option value='3'>Three</option> 
 
     <option value='4'>Four</option> 
 
    </select> 
 
    <!-- Print out the data, then pass it through json for easier readability. --> 
 
    <pre> 
 
{{$data|json}} 
 
     <div id="live"></div> 
 

 
     </pre> 
 
    </div> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.min.js"></script> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-12-23 23:08:55

Я собираюсь настроить его только как smidgen, но пока это будет Работа. :) Спасибо Том –

Когда я осмотрите DOM после запуска вашего кода, похоже, что библиотека Materialize создает новое раскрывающееся меню. Исходный выпадающий список, который вы подключили к слушателю Vue, скрыт. Затем Materialize создал новый отформатированный формат. Поэтому, когда вы обновляете значение там исходный выпадающий список остается скрытым и не обновляется. Поскольку вы сделали document.on('change'), его все равно собирают, но я думаю, что если y ou сделал прослушиватель $('#jurisdiction').on('change'), вы обнаружите, что он никогда не стреляет.

Я проверил Materialize JS и посмотрю, что я могу найти, вам кажется, что вам нужно будет использовать библиотеку Materialize для запуска события и обновления компонента Vue.

источник

2015-12-23 23:01:32 Jeff

Я уже давно копаю код материализации, и он фактически обновляет значение select. Предполагается также инициировать событие «изменения». Кажется, что это не так. Вы можете увидеть части о выборе в коде материализации в [line 2847] (https://github.com/Dogfalo/materialize/blob/master/dist/js/materialize.js#L2847), и вы можете увидеть событие изменения огонь вокруг [строка 2955] (https://github.com/Dogfalo/materialize/blob/master/dist/js/materialize.js#L2955) –

У меня была аналогичная проблема с материализовать-CSS и VUE JS. После некоторого времени борется с ним и проверяя код с помощью firebug, я понял, что все в порядке ... кроме того, что я вызывал $('select').material_select(); в неправильном месте.

Я выдавал заявление точно так же, как вы, в верхней части моего файла app.js. Улов здесь, мы должны выдать эту команду, когда ваше приложение Vue готово.

В моем случае выдача команды в готовой функции приложения сделала трюк.

var vm = new Vue({ 
el:"#app", 
data: function() { 
    options: ["Clayton","Mt Meigs","Birmingham","Helena","Grant"] 
}, 
ready: function() { 
    $('select').material_select(); 
}})

Обязательно включите jQuery сначала, а затем materialize.js и Vue.js. После того, как они включены, используйте код, как указано выше, и он должен работать.

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

<div class="input-field col s12 m5"> 
    <select class="black-text"> 
     <option value="" selected="">Source Location</option> 
     <option v-for="city in options" value="{{city}}">{{city}}</option> 
    </select> 
</div>

источник

2016-01-11 15:09:56 Prakhar

Как насчет отдельных vuejs от него?

Если вы можете получить выбор с JQuery, то вы можете установить значение VUE экземпляр вручную, как:

var vm = new Vue({ 
    el: '.container', 

    data: { 
     select: '' 
    } 
}); 

$('select').material_select(); 
$('select').on('change', function(e){ 
    vm.$set('select', ...) 
});

источник

2016-03-10 02:40:59 aGuegu

У меня была проблема, где моя материализовать выберите выпадающий на UI не обновляется с значение из модели Vue. Кроме того, я не мог очистить предыдущий выбор программным путем. Но этот код ниже работает для меня. Последним трюком было использование функции Vue.nextTick (...).

HTML-:

<select id="fooField" v-model="myObject.foo" onchange="MyVueElement.fooChanged(this)"> 
    <option value="" disabled selected>Choose...</option> 
    <option value="A">a</option> 
    <option value="B">b</option> 
    <option value="C">c</option> 
</select>

И JS для обработки нового выбора из пользовательского интерфейса:

fooChanged: function(selectObject) { 
    this.myObject.foo = selectObject.value; 
},

Когда я хочу, чтобы сбросить/очистить выбор/выпадающее меню на интерфейсе:

myObject.foo = ""; //setting this to null did not work 
Vue.nextTick(function(){ 
     $("#fooField").material_select(); 
    });

источник

2018-03-03 23:58:43 Sagan

jQuery and Materialize not update VueJS select value

ответ

Смежные вопросы