Javascript 如何正确使用从父组件继承的数据？

我是VueJS的新手，我正在建立一个相当简单的网站，用户可以在其中更改网站的一些元素，例如网站的背景图像

从网站的管理部分，用户可以上传一个图像，将作为网页的背景之一使用。该值存储在Rails API中，当用户访问访问者部分时，VueJS从Rails调用设置，然后将其显示在需要的位置。我使用

Vue路由器

，因此我调用我的

App.Vue

中的设置，并将接收到的数据传输到

组件。我决定只加载一次所有数据，而不是每次页面更改都加载它们

下面是它的外观：

App.vue

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view :settings="settings" :me="bio"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      settings: null
    }
  },
  created () {
    this.$http.secured.get('/settings')
      .then(response => {
        this.settings = response.data
      })
      .catch(error => this.setError(error))
  }
}
</script>

<template>
  <div id="landing" :style="{background: this.settings.landing_bg.url}">
  <p>{{ this.settings.landing_bg.url }}</p>
  <!-- Some other elements, not related -->
  </div>
</template>

<script>
export default {
  props: ['settings'],
  created () {
    console.log(this.settings)
  }
}
</script>

<style scoped>
</style>

导出默认值{
数据：函数（）{
返回{
设置：空
}
},
创建（）{
这是.http.secured.get（“/settings”）
。然后（响应=>{
this.settings=response.data
})
.catch（error=>this.setError（error））
}
}

前方/着陆.vue

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view :settings="settings" :me="bio"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      settings: null
    }
  },
  created () {
    this.$http.secured.get('/settings')
      .then(response => {
        this.settings = response.data
      })
      .catch(error => this.setError(error))
  }
}
</script>

<template>
  <div id="landing" :style="{background: this.settings.landing_bg.url}">
  <p>{{ this.settings.landing_bg.url }}</p>
  <!-- Some other elements, not related -->
  </div>
</template>

<script>
export default {
  props: ['settings'],
  created () {
    console.log(this.settings)
  }
}
</script>

<style scoped>
</style>

{{this.settings.landing_bg.url}

导出默认值{
道具：[“设置”]，
创建（）{
console.log（this.settings）
}
}

我对此配置有几个问题：

• 第一个问题是，我收到错误消息说VueJS无法读取null的“landing_bg”

• 但是VueJS在其正下方的
  中显示图像路径没有问题

• console.log（this.settings）

  在我重新加载页面时返回

  null

  ，但如果我转到另一个页面然后返回，则会正确显示设置。但是，没有设置背景图像

• 我试图用

  datas（）

  声明此

  的结构。设置将具有，但VueJS告诉我它不喜欢声明两个
  设置的方式
  

我想这是异步负载的问题，但是我应该如何处理呢？我应该使用VueX吗

---

提前感谢

首先，

此

在您的

:style

中是多余的，请将其更改为：

:style="{ background: settings.landing_bg.url }"

顺便说一下，除非您的

landing\u bg.url

看起来像这样：

url（'bg\u url'）

您可能需要创建一个计算属性：

computed: {
  bgURL() { return `background: url('${this.settings.landing_bg.url}')` }
}

您可能还必须在该div中添加一个

v-if

，以便仅在加载

设置后渲染它。该错误会弹出，因为创建组件时，
设置
仍然为空

<div id="landing" :style="bgURL" v-if="settings">

首先，
此
在您的
：样式中是多余的，请将其更改为：

:style="{ background: settings.landing_bg.url }"

顺便说一下，除非您的
landing\u bg.url
看起来像这样：
url（'bg\u url'）
您可能需要创建一个计算属性：

computed: {
  bgURL() { return `background: url('${this.settings.landing_bg.url}')` }
}

您可能还必须在该div中添加一个
v-if
，以便仅在加载
设置后渲染它。该错误会弹出，因为创建组件时，
设置
仍然为空

<div id="landing" :style="bgURL" v-if="settings">



我试图用datas（）声明this.settings将具有什么结构，但VueJS告诉我它不喜欢声明两个设置的方式

不，在道具上声明，像这样

道具：{
“设置”：{
类型：对象，
默认值：（）=>({
着陆背景：{
url:“”//您可以在此处指定默认url或将其保留为空以仅删除错误
}
})
},
},

我试图用datas（）声明this.settings将具有什么结构，但VueJS告诉我它不喜欢声明两个设置的方式

不，在道具上声明，像这样

道具：{
“设置”：{
类型：对象，
默认值：（）=>({
着陆背景：{
url:“”//您可以在此处指定默认url或将其保留为空以仅删除错误
}
})
},
},
谢谢！我还意识到我的css规则不正确，我忘记了
url（）
谢谢！我还意识到我的css规则不正确，我忘记了
url（）