在Vuetify项目的模态弹窗中集成vue-social-sharing出现报错如何解决

错误原因 #

vue-social-sharing要求所有<network>子组件必须嵌套在<social-sharing>根组件内部使用，你当前直接在弹窗内使用<network>没有父容器承载配置，因此会触发组件实例找不到相关配置的报错，点击自然无响应。

修正步骤 #

1. 修改模态弹窗代码，在所有<network>外层包裹<social-sharing>组件，同时传入分享所需的基础配置参数：

<v-dialog
  v-model="shareDialog"
  persistent
  max-width="800px"
>
  <v-card>
    <div class="pa-1">
      <!-- 新增social-sharing父组件，配置分享参数 -->
      <social-sharing
        :url="shareUrl"
        :title="shareTitle"
        :description="shareDescription"
      >
        <network
          network="email"
          class="pointer inline pa-1"
        >
          <span>
            <i
              class="fas fa-envelope-square"
              style="font-size: 18px"
            />
            Email
          </span>
        </network>
        <network
          network="facebook"
          class="pointer inline pa-1"
        >
          <span>
            <i
              class="fab fa-facebook-square"
              style="font-size: 18px"
            />
            Facebook
          </span>
        </network>
        <network
          network="linkedin"
          class="pointer inline pa-1"
        >
          <span>
            <i
              class="fab fa-linkedin"
              style="font-size: 18px"
            />
            LinkedIn
          </span>
        </network>
      </social-sharing>
    </div>
  </v-card>
</v-dialog>

2. 在data中补充分享配置变量：

data: () => ({
  shareDialog: false,
  // 分享基础配置，可根据业务需求动态修改
  shareUrl: 'https://你需要分享的页面地址',
  shareTitle: '分享内容的标题',
  shareDescription: '分享内容的描述信息'
})

3. 如果需要打开弹窗时动态传入分享内容，修改open方法即可：

open(data) {
  this.shareUrl = data.url
  this.shareTitle = data.title
  this.shareDescription = data.desc
  this.shareDialog = true
}

额外注意 #

如果是Vue2项目请安装3.x版本的vue-social-sharing，4.x及以上版本仅适配Vue3，版本不匹配也会触发同类报错。

内容的提问来源于stack exchange，提问作者Nina