Vue Mdc 滑块未正确更新

Question

我正在使用 Material 的 Vue 实现：https://stasson.github.io/vue-mdc-adapter/#/

我遇到的问题是页面加载。当我查看我的滑块时，栏会根据保存的值正确填充，但可用于更改滑块值的旋钮保持为 0。但是，每当我调整窗口大小或打开和关闭开发工具时，旋钮都会调整到正确位置。

这是页面加载时的样子：

代码：

  <mdc-slider
    v-model="value"
    min="0"
    max="120"      
    step="5"
    unit="mins"
  />

有没有人可以在页面加载时正确加载旋钮？

Answer 1

我不确定您的 Vue 对象是什么样的，但这对我有用..

---

编辑 #2： 看起来这是“常见的”。此外，您需要确保已加载所有正确的 css 文件，等等。如果你能提供一些重现这个问题的代码，或者更详细地说明你的配置，那将非常有帮助。你对css等有什么特别的吗？

编辑 #2.1：您可以根据他们的文档和 layout-on 属性尝试以下任一示例。（这是在黑暗中的尝试- 我不确定这些示例中的任何一个是否有效..)

 // Example 1:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on   // ADDED: you could try using an empty prop
    unit="mins" // not sure what this is doing?
  />

---

 // Example 2:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on="change" // ADDED: or pass in the 'change' event
    unit="mins"        // not sure what this is doing?
  />

From the documentation:

(*) 默认情况下，滑块组件跟踪窗口调整大小和抽屉打开/关闭事件以重置其布局，但如果关闭 css 调整大小或位置更改，布局可能会关闭。在这种情况下，您可以使用 layout-on 事件来强制布局，或以编程方式调用 layout() 方法。

---

CodePen mirror

---

编辑：我敢打赌，这是因为您在 max、min 和step, 属性.. You can read more in their documentation here.或者您可能没有加载正确的css？

试试这样的：

 <mdc-slider
    v-model="value"
    min=0    // or :min="0"
    max=120  // or :max="120"      
    step=5   // or :step="5"
    unit="mins"
  />

---

new Vue({
  el: "#app",
  data: {
    max1: 120,
    max2: 200,
    value1: 120,
    value2: 80,
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.css" type="text/css">
<script src="https://unpkg.com/vue@^2.5.9/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.js"></script>

<div id="app">
  <div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max1 }}</b> | Current: <b>{{ value1 }}</b></span>
      <mdc-slider min=0 :max=max1 step=10 display-markers v-model="value1" />
    </div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max2 }}</b> | Current: <b>{{ value2 }}</b></span>
      <mdc-slider min=0 :max=max2 step=10 display-markers v-model="value2" />
    </div>
  </div>
</div>