vue中的Vuetify按钮- nuxt应用程序的社会共享

Question

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

我在plugins文件夹中创建了一个文件-vue-社会化共享. in：

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标记引起的，例如嵌套块级元素内部，或缺少.提供水合和充分的客户端渲染。 Vue警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

我认为这是一个配置的问题，v是不可用的社会共享正在提供，请建议。

谢谢

Answer 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>