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选择值

回答

相关问题