vue.js - 绑定类更改但 div 不会移动

Question

我有一个带有 3 个可移动面板的侧边栏。我通过使用（使用 TailwindCSS 类）更改绑定:class到父级来移动它。当我单击菜单按钮时，我看到 DOM 确实会做出反应并使用正确的值更改类，但面板不会移动。<div>-translate-x-(amount)translate-x-

链接到沙箱（由于某种原因它可以在沙箱上运行 - 它也可以在我的 PC 上随机运行，但很少）： https ://codesandbox.io/s/hopeful-cdn-o38n6?file=/src/App.vue

这是代码：

<template>
    <div class="h-screen flex">
        <div class="flex container w-40 h-80 bg-black mx-auto my-auto text-black overflow-hidden">
            <div class="sidebar container flex transform duration-1000" :class="position">

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-gray-300">
                    <button @click="currentIndex++">Menu item</button>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 bg-blue-300 transform duration-1000">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>

                        <button class="flex justify-start" @click="currentIndex++">
                        Menu item
                        </button>
                    </div>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-red-300">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            sidebarWidth: 40,
            currentIndex: 0
        }),
        computed: {
            position() {
                if (this.currentIndex === 0) {
                    
                    return 'translate-x-0'
                } else {                
                    
                    return `-translate-x-${this.sidebarWidth * this.currentIndex}`}
            }
        },
    }
</script>

标签： vue.jstailwind-css

Answer 1

为了跟踪您的错误原因，我看到您的代码有一个演示版本，例如codesanbox。

演示

const app = new Vue({
  el: '#root',
  data: {
     sidebarWidth: 40,
            currentIndex: 0,
    message: 'TailWindCSS Dev',
          model: null,
  },
  
          computed: {
            position() {
                if (this.currentIndex === 0) {
                    
                    return 'translate-x-0'
                } else {                
                    
                    return `-translate-x-${this.sidebarWidth * this.currentIndex}`}
            }
        },
  
});

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<div id="root">
   <div class="flex justify-center">
     <p class="text-3xl text-yellow-600">{{message}}</p>
  </div>
  
  <template>
    <div class="h-screen flex">
        <div class="flex container w-40 h-80 bg-black mx-auto my-auto text-black overflow-hidden">
            <div class="sidebar container flex transform duration-1000" :class="position">

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-gray-300">
                    <button @click="currentIndex++">Menu item</button>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 bg-blue-300 transform duration-1000">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>

                        <button class="flex justify-start" @click="currentIndex++">
                        Menu item
                        </button>
                    </div>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-red-300">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
</div>