Question

我正在尝试在我的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引起的   标记，例如在
内嵌套块级元素，或   缺少。百灵水化和执行完整的客户端   渲染。

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

我认为这是配置问题，v-btn在呈现社交共享时不可用，请提出建议。

谢谢

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>

Nuxt应用程序的vue-社交共享中的Vuetify按钮

1 个答案: