Question

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

从网站的管理部分，用户可以上传将用作页面背景之一的图像。该值存储在Rails API中，并且当用户进入访问者部分时，VueJS从Rails调用设置，然后将其显示在我想要的位置。我使用Vue-Router，因此我在App.vue中调用设置，并将接收到的数据传输到<router-view>组件。我决定这样做是只加载一次所有数据，而不是每次页面更改都加载它们。

这是它的外观：

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>

front / Landing.vue

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

此配置有几个问题：

第一个是我收到错误消息，说VueJS无法读取null的“ landing_bg”
但是VueJS没问题在其下方的<p>中显示图像的路径
console.log(this.settings)在重新加载页面时返回null，但是如果我转到另一页面然后返回，则会正确显示设置。但是，没有设置背景图片。
我试图用datas()声明this.settings的结构，但是VueJS告诉我，它不喜欢如何声明两个settings。

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

提前谢谢

Answer 1

首先，this在您的:style中是多余的，请将其更改为：

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

顺便说一句，除非您的landing_bg.url看起来像这样：url('bg_url')，否则您可能要创建一个计算属性：

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

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

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

Answer 2

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

不，像这样在道具上声明

{=INDEX(Sheet1!A:A,SMALL(IF(Sheet1!B:B=1,ROW(Sheet1!B:B)-ROW(INDEX(Sheet1!B:B,1,1))+1),Sheet2!A2))}

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

2 个答案: