jQuery和Materialise不更新VueJS選擇值

我一直在這個問題上工作了幾個小時，現在它真的在吃我。當我使用Materialize/jQuery和VueJS的組合時，爲了進行選擇，然後嘗試選擇所需值，VueJS未更新以反映所選的新值。我認爲這是一個物化問題;但是，我無法獲得觸發VueJS更新/更改事件的值。jQuery和Materialise不更新VueJS選擇值

我有什麼是在下面的代碼片段。我所希望做的是隻是有選擇（或任何選擇更新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

儘管這可能不是一個理想的解決方案，但它可能會繞過Select元素的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 listener的那個下拉菜單是隱藏的，然後Materialize創建了一個新的格式化的下拉菜單。在那裏，原來的下拉菜單保持隱藏狀態，並且沒有更新，因爲你做了document.on('change')它無論如何都被拿起來了，但是我認爲如果y你做了一個$('#jurisdiction').on('change')聽衆，你會發現它永遠不會開火。

我會看看Materialise JS，看看我能找到什麼，看起來你需要使用Materialize庫來觸發事件並更新Vue組件。

來源

2015-12-23 23:01:32 Jeff

我一直在挖掘物化代碼一段時間，它實際上更新了select的值。它也被設想觸發「改變」事件。它似乎沒有。您可以在[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和JS VUE一個類似的問題。經過一段時間的努力，並用螢火蟲檢查代碼後，我意識到一切都很好......除了我在錯誤的地方打電話$('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.一旦包括這些，使用上面的代碼，它應該工作

我也看到，你沒有在DOM級別高效地使用Vue。您可以使用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我Materialise的選擇下拉沒有被提供更新的問題來自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從UI處理一個新的選擇：

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

當我想重置/清除的UI選擇/下拉列表：

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

來源

2018-03-03 23:58:43 Sagan

jQuery和Materialise不更新VueJS選擇值

回答

相關問題