jQuery 和 Materialize 不更新 VueJS 选择值答案

【问题标题】：jQuery and Materialize not updating VueJS select valuejQuery 和 Materialize 不更新 VueJS 选择值
【发布时间】：2016-03-30 09:39:16
【问题描述】：

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

我认为这是一个 Materialise 问题；但是，对于 VueJS，我根本无法获得触发更新/更改事件的值。

我所拥有的是下面的 sn-p。我要做的只是让选择 - 或任何选择在由 jQuery 更新时正确更新 VueJS。

这似乎开始变得不可能了，尽管我知道得更多。

$('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);
	}
    },
})

<!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>

有什么建议吗？

【问题讨论】：

标签： javascript jquery vue.js materialize

【解决方案1】：

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

我会检查 Materialize JS，看看我能找到什么，看来您需要使用 Materialize 库来触发事件并更新 Vue 组件。

【讨论】：

我一直在研究物化代码一段时间，它实际上更新了选择的值。还假设触发“更改”事件。它似乎没有。您可以在line 2847 周围的具体化代码中看到有关选择的部分，您可以在line 2955 周围看到更改事件触发

【解决方案2】：

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

这基本上将它们缝合在一起。

$('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>

【讨论】：

我将对其稍作调整，但现在这将起作用。 :) 谢谢汤姆

【解决方案3】：

materialize-css 和 vue js 也有类似的问题。经过一段时间的努力并用萤火虫检查了代码后，我意识到一切都很好......除了我在错误的地方调用了$('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>

【讨论】：

【解决方案4】：

将 vuejs 从中分离出来怎么样？

如果你可以使用 jquery 获得选择，那么你可以手动将值设置为 vue 实例：

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

    data: {
       select: ''
    }
});

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

【讨论】：

【解决方案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();
    });

【讨论】：