小编KJP*_*ker的帖子

现在有浏览器支持问题。

我让它在 Firefox 和 Chrome 上按预期工作，但是在 safari 上我遇到了图像问题。目前，图像是使用“object-fit:cover”设置的，并且在 Chrome/firefox 上具有预期的效果。但是对于safari来说，它似乎忽略了它并且图像非常大。这是一个屏幕截图。左边是预期的，右边是实际的结果。

这是影响此行/列的代码的 html 和 css 片段。

  <div class="feature-image">
    <img class="img-1" src="@/assets/preview-images/feature 1.png" alt="">
  </div>

  .feature-image {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    img {
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    .img-2 {
      max-width: 320px;
    }
  }

我一直遇到一个问题，我正在等待来自道具的数据在我创建的钩子内做一些事情。它不断抛出错误，例如“this.value is not defined”（因为它还没有从 prop 加载）

我已经使用v-if并且仅在需要时使用修复了其中的一些问题。但是，在某些情况下，我想在我的创建中使用该道具信息，当发生这种情况时，我最终会收到错误，并且不确定如何最好地告诉创建的那部分在运行之前“等待”数据。

有什么建议吗？

——

更新以添加一些示例代码。

在 App.js 页面上，我正在调用“userInfo”并将其设置为这样的数据。我这样做有两个原因。首先检查用户是否登录，其次花时间保存用户信息，因为它将在以后在整个应用程序中使用。（请注意，user 和 userInfo 是不同的，包含不同的信息。用户是电子邮件/密码，而 userInfo 是用户名、生物等。）

data() {
  return {
    user: null,
    userInfo: null,
  }
},
created(){
//let user = firebase.auth().currentUser
  firebase.auth().onAuthStateChanged((user) => {
    if(user){
      this.user = user
      let ref = db.collection('users')
      .where('user_id', '==', this.user.uid)
      ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.userInfo = doc.data()
      })
    })

    } else {
      this.user = null
    }
  })
},

现在，我在 using v-bind 中传递这些信息。然后使用道具在我需要一些信息的区域调用它。

当我想做一些事情时就会出现问题，例如 -

if(this.userInfo) {
  value = true …

我的 Vue 项目中有三个 .scss 文件。

主要的全局组件，我已将其导入到我的主应用程序组件中。然后，另外两个是容器变量，因此不能以同样的方式重要，因为找不到变量。

所以，我创建了一个 vue.config.js 文件，并添加了 -

module.exports = {
css: {
  loaderOptions: {
    sass: {
      data: `@import "@/styles/_variables.scss";`
    },
  }
}
};

问题是，导入我的 _variables.scss 文件，但我还想导入 _other.scss 文件（来自同一文件夹）。

我不知道如何构建它以使其导入和使用两者。