为什么 Nuxtjs 在数据变化时不更新模板？

Question

我在 Nuxt 中有一个组件，模板中有以下 HTML：

<div class="slider" id="slider" ref="slider" :style="'transform: transitionX(-' + sliderPosition + '%)'">

那我还有一个数据变量：

export default {
      data() {
         return { 
            sliderPosition: 0
         }
      },
      methods: {
         moveLeft() {
            this.sliderPosition -= 25
            console.log(this.sliderPosition)
         },

现在，每次我单击触发该方法的按钮时，控制台都会记录增加的 sliderPosition 值。但在模板中它始终保持为 0 并且从不更新 - transitionX 永远不会改变（在 Chrome 检查器中显示 0% 并且不会改变）。

为什么会这样？

Answer 1

没有 transform 函数 transitionX - docs。我猜你想要 translateX
您的 sliderPosition 是负数，并且您在样式表达式中有一个 -。因此，如果 sliderPosition 的值为 -25，则样式为 translateX(--25)，这是无效的

所以要明确一点，这不是 Vue 没有更新 DOM 的问题，而是浏览器不接受无效样式的问题...

const vm = new Vue({
  el: '#app',
  data() {
    return {
      sliderPosition: 0
    }
  },
  methods: {
    move(percent) {
      this.sliderPosition += percent
      console.log(this.sliderPosition)
    },
  },
  computed: {
    sliderStyle() {
      return {
        transform: `translateX(${this.sliderPosition}%)`
      }    
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
  <button @click="move(-5)">Move left</button>
  <button @click="move(5)">Move right</button>
  <div class="slider" id="slider" ref="slider" :style="sliderStyle">This is OK!
  </div>
  <div class="slider" id="slider" ref="slider" :style="`transform: translateX(-${this.sliderPosition}%)`">This is not!
  </div>
</div>

为什么 Nuxtjs 在数据变化时不更新模板？

Why doesn't Nuxtjs update template when data changes?

vue.js

nuxt.js

vue-reactivity

nuxtjs