nuxt 应用程序的 vue-social-sharing 中的 Vuetify 按钮

Posted 2023-03-10

【中文标题】nuxt 应用程序的 vue-social-sharing 中的 Vuetify 按钮

【英文标题】：Vuetify buttons in vue-social-sharing of nuxt application

【发布时间】：2019-12-31 06:58:37

【问题描述】：

我正在尝试在我的 nuxt (+vuetify) 应用程序中实现这一点 - https://github.com/nicolasbeauvais/vue-social-sharing。

我在插件文件夹中创建了一个文件 - vue-social-sharing.js：

import Vue from "vue";
import VueSocialSharing from "vue-social-sharing";

Vue.use(VueSocialSharing);

将它们包含在 nuxt.config.js 中

 plugins: [
    "@/plugins/vuetify",
    "@/plugins/vue-social-sharing.js"
  ],

我正在尝试使用 Vueity 美化按钮（效果很好 - https://jsfiddle.net/menteora/evydLj65/1/）

<social-sharing url="https://vuejs.org/"
                      title="The Progressive javascript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <v-btn><network network="email">
          <i class="fa fa-envelope"></i> Email
      </network></v-btn>
      <v-btn><network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network></v-btn>
  </div>
</social-sharing>

但我遇到了以下错误：

[Vue 警告]：客户端渲染的虚拟 DOM 树不匹配 服务器渲染的内容。这可能是由不正确的 html 引起的 标记，例如在

中嵌套块级元素，或者 缺少

。 Bailing 水合作用并执行完整的客户端 使成为。

[Vue 警告]：未知的自定义元素：​​ - 你注册了吗 组件正确吗？对于递归组件，请确保 提供“名称”选项。

我认为是配置问题，v-btn 不可用，正在渲染社交分享，请提出建议。

谢谢

【问题讨论】：

在这个项目中导入Vuetify有什么问题吗？看看我相信你的 v-btn 可以工作的组件，但在外面你可能需要访问 vuetify，所以只需安装在这个项目上。 当然已经安装了 Vuetify。

【参考方案1】：

我还没有安装这些，但我几乎可以打赌，你用按钮包装网络组件的事实是一个问题。因为它生成的标记很可能看起来像这样：

<ul class="networks">
  <button>
    <li></li>
  </button>
</ul>

您是否尝试过将此标记替换为：

<social-sharing>
  <div>
    <network network="facebook">
       <v-btn><i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
    </network>
    <network network="facebook">
       <v-btn><i class="fa fa-fw fa-twitter"></i> Twitter</v-btn>
    </network>
  </div>
</social-sharing>

【讨论】：

是的，我试过了……社交分享中的任何 v-btn 都会出错