jQuery 和 Materialise 不更新 VueJS select 值

Question

当我使用 Materialize/jQuery and VueJS 的组合来创建 select，然后我尝试 select 所需的值时，VueJS 不会更新以反映新值那是 selected.

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

我所拥有的是在下面的代码片段中。我想要做的只是让 select - 或任何 select 在 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>

有什么建议吗？

Answer 1

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

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

Answer 2

虽然这可能不是一个理想的解决方案，但它可以绕过 select 元素的 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>

Answer 3

我对 materialize-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。一旦包含这些，使用上面的代码，它应该可以工作

我还看到，您没有在 DOM 级别有效地使用 Vue。您可以使用 Vue 指令 v-for 来填充您的 select 选项，如下所示：

<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 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 上的具体化 select 下拉列表未使用 Vue 模型的值进行更新。另外，我无法以编程方式清除以前的 selection。但是下面的这段代码对我有用。最后的技巧是使用 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 的新 selection 的 JS：

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

当我想 reset/clear select/dropdown 上 UI:

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

jQuery 和 Materialise 不更新 VueJS select 值

jQuery and Materialize not updating VueJS select value

javascript

jquery

materialize

vue.js