Vue js Vuetify自定义组件未根据显示断点渲染

Question

我有一个自定义组件，它基本上是一个具有特定样式的 v-btn 组件。当我在基于显示断点的条件下在 v-menu 激活器中使用它时，自定义组件不会显示在屏幕上。但是如果我使用常规的 v-btn 按钮会根据显示断点正确显示。我在这里做错了什么？

https://codepen.io/jgunawan-dc/pen/XWzJqRy?editors=1010

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <global-custom-button
            v-if="$vuetify.breakpoint.mdAndDown"
            v-bind="attrs"
            v-on="on"
          >
            Show on medium and lower
          </global-custom-button>
          <v-btn v-else
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Dropdown
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

Vue.component('global-custom-button', {
  template: '<v-btn outlined color="info" @click="$emit(\'click\', $event)"><slot></slot></v-btn>'
});
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
})

Answer 1

上述情况产生了两个错误：

错误信息 1：

[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

错误信息 2：

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

当 Vue 尝试在另一个元素之前插入一个元素，但该元素不再存在于 DOM 中时，就会出现这种情况。

在您的情况下，将 $vuetify.breakpoint.mdAndDown 从 true 更改为 false 或反之亦然会清除 global-custom-button 组件或下拉列表 v-btn。

一种可能的解决方法是使用v-show 而不是v-if。

警告：

请注意，v-show 不支持该元素，也不适用于 v-else。

所以这个建议是可行的（你可以改变以适应你的需要）：

      <global-custom-button
        v-show="$vuetify.breakpoint.mdAndDown"
        v-bind="attrs"
        v-on="on"
      >
        Show on medium and lower
      </global-custom-button>
      <v-btn v-show="!$vuetify.breakpoint.mdAndDown"
        color="primary"
        dark
        v-bind="attrs"
        v-on="on"
      >
        Dropdown
      </v-btn>

编辑：

This works 不带v-if 或v-show

Answer 2

如需快速修复，请使用@Rotiken 所说的v-show。

作为另一种解决方案，您还可以注册两个全局组件并使用额外的condition prop 显示/隐藏它：

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <global-custom-button
      :condition="$vuetify.breakpoint.mdAndDown"
      v-bind="attrs"
      v-on="on"      
    >
      Show on medium and lower
    </global-custom-button>
          
    <global-custom-button-2
      :condition="!$vuetify.breakpoint.mdAndDown"
      v-bind="attrs"
      v-on="on"
    >
      Dropdown
    </global-custom-button-2>
  </template>
  ...
</v-menu>

...

Vue.component('global-custom-button', {
  template: '<v-btn v-if="condition" outlined color="info" @click="$emit(\'click\', $event)"><slot></slot></v-btn>',
  props: ['condition']
});

Vue.component('global-custom-button-2', {
  template: '<v-btn v-if="condition" color="primary" dark @click="$emit(\'click\', $event)"><slot></slot></v-btn>',
  props: ['condition']
});
...

根据this CodePen，这也有效。

---

为什么会发生这种情况以及为什么v-show 可以在相同的模板下正常工作：我无法给出确切的答案，但有一些假设。

Vue.js docs 表示v-if 从 DOM 中移除对象，而 v-show 在 CSS 中更改其显示状态，但将其保留在 DOM 中。

由于您在 vuetify v-menu 组件中使用 v-if，因此该组件可能具有一些更新 v-slot:activator 内容的方法，这些方法可能与使用 v-if 的条件渲染发生冲突（并且不会同时执行）和 vuetify 显示断点。

如果您熟悉 TypeScript，可以查看 v-menu sources 或 activatable mixin sources。也许在这里你会找到这种行为的真正原因。

如果您只是想避免此类问题，请在此类情况下使用v-show。