绑定类更改但 div 不会移动

Posted 2023-03-07

【中文标题】绑定类更改但 div 不会移动

【英文标题】：The bound class changes but the div won't move

【发布时间】：2021-10-11 19:14:50

【问题描述】：

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

【参考方案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>

【讨论】：

这太棒了！谢谢。但是你是怎么让它工作的？我的问题的主要问题不是我不能运行 sn-p - 因为我可以在我的本地开发环境中运行它 - 但是尽管 DOM 类更新了面板根本没有移动 - 你找到原因了吗?因为你的代码和我的一模一样

正如我在答案中提到的，让我知道您的代码的codesanbox链接

哦，我现在知道了！我在主帖中添加了指向沙盒的链接

我访问过它，该项目有错误，并且我看到在您遇到它时发布您从控制台收到的错误消息。

对不起，我没有保存我认为它会自动保存的工作 - 现在我更新了链接。另外，我发现了问题 - 你可以看到我的答案

【参考方案2】：

我找到了答案，如果以后有人也会遇到这种奇怪的行为：

问题在于 Tailwind 的 JIT 模式：https://tailwindcss.com/docs/just-in-time-mode

它按需编译类 - 只有他在构建应用程序时看到使用的类，在我的情况下，绑定的类不会立即使用 - 仅在点击事件之后，所以 Tailwind 可能不会在 JIT 模式下看到这些类，所以我从tailwind.config.js 中删除了mode: jit, 行，它起作用了