Question

当我使用Materialize / jQuery和VueJS的组合时，进行选择，然后我尝试选择所需的值，VueJS未更新以反映选择的新值。

我认为这是一个物化问题;但是，我无法获得为VueJS触发更新/更改事件的值。

我的内容在下面的代码段中。我想要做的就是在jQuery更新时正确选择 - 或任何选择更新VueJS。

即使我知道的更好，它似乎也开始变得不可能了。

toString

$('select').material_select();
$(document).on('change', function(e){
	$('#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: {
	'select':''
    },
    methods: {
	updateThing: function(){
		console.log(this);
	}
    },
})

有什么建议吗？

Answer 1

我遇到了与materialize-css和vue js类似的问题。经过一段时间的挣扎并用萤火虫检查代码后，我意识到一切都很好......除了我在错误的地方呼叫$('select').material_select();。

我在app.js文件的顶部发出了与你一样的声明。这里的问题是我们需要在您的Vue应用程序就绪时发出此命令。

在我的情况下，在app的ready函数中发出命令就可以了。

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>

Answer 2

在运行代码后检查DOM时，看起来Materialize库会创建一个新的下拉列表。原始下拉列表，即您附加Vue侦听器的下拉列表，将被隐藏。然后Materialise创建了一个新的，格式化的下拉列表。因此，当您更新那里的值时，原始下拉列表仍然隐藏，并且不会更新。因为你做了一个document.on('change')，它无论如何都会被接收，但我认为如果你做了$('#jurisdiction').on('change')听众，你会发现它永远不会被解雇。

我将查看Materialize JS并查看我能找到的内容，您似乎需要使用Materialize库来触发事件并更新Vue组件。

Answer 3

虽然这可能不是一个理想的解决方案，但它可能会绕过选择元素的Materialisecss重载。

这基本上将它们拼接在一起。

$('select').material_select();
$(document).on('change', function(e){
	$('#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: {
	select:''
    },
    methods: {
	updateThing: function(){
		console.log(this);
	}
    },
});
$('#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>

Answer 4

如何从中分离出vuejs？

如果您可以使用jquery获取选择，则可以手动将值设置为vue实例，如：

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

    data: {
       select: ''
    }
});

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

Answer 5

我遇到的问题是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>

用于处理来自UI的新选择的JS：

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

当我想重置/清除UI上的选择/下拉列表时：

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

jQuery和Materialize不更新VueJS选择值

5 个答案: