Vue.js 如何在vue中呈现对象的内容？

如果这太简单，我会道歉，但我被卡住了

我在vue中创建了一个具有三个属性（slug、title和content）的对象。我成功地对该对象进行了console.logged。现在如何使用页面中的对象来呈现其内容

我不需要在对象中循环，因为它只有一个项

<template>
  <div class="relative py-16 overflow-hidden bg-white">
    <div class="relative px-4 sm:px-6 lg:px-8">
      <div class="mx-auto text-lg max-w-prose">
        <h1>
          <span
            class="block text-base font-semibold tracking-wide text-center text-indigo-600 uppercase"
            >Hello</span
          >
          <span
            class="block mt-2 text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl"
            >Here is the name</span
          >
        </h1>
        <p class="mt-8 text-xl leading-8 text-gray-700"></p>
        <div
          v-bind="this.data.content"
          class="text-lg font-medium leading-6 text-gray-900"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
const Cosmic = require("cosmicjs");
const api = Cosmic();
const bucket = api.bucket({
  slug: "((BUCKETNAME))",
  read_key: "((KEY))",
});

const data = bucket
  .getObject({
    id: "((BUCKET ID))", // Object ID
    props: "slug,title,content", // get only what you need
  })
  .then((data) => {
    const about = data.objects;
    console.log(data);
  });

export default {
  name: "data",
  data() {
    return {
      data,
    };
  },
};
</script>

你好
这是名字

const Cosmic=require（“cosmicjs”）；
常数api=Cosmic（）；
const bucket=api.bucket({
鼻涕虫：“（（BUCKETNAME））”，
读_键：“（（键））”，
});
常量数据=桶
.getObject({
id:（（BUCKET id）），//对象id
道具：“slug，title，content”//只获取您需要的
})
。然后（（数据）=>{
const about=data.objects；
控制台日志（数据）；
});
导出默认值{
名称：“数据”，
数据（）{
返回{
数据，
};
},
};

正如其他评论者所建议的，在此处阅读Vue语法指南将非常有用

但是，为了用最少的代码更改来回答您的问题，您需要将数据请求移动到vue组件的生命周期挂钩

<template>
  <h1>{{ dataObjects.title }}</h1>
  <p>{{ dataObjects.slug }}</p>
  <p>{{ dataObjects.content }}</p>
</template>

<script>
export default {
  name: "data",
  data() {
    return {
      dataObjects: null,
    };
  },
  mounted() {
    bucket.getObject({
      id: "((BUCKET ID))", // Object ID
      props: "slug,title,content", // get only what you need
    })
      .then((data) => {
        // Assign the return value to the dataObjects propery of the vue instance.
        this.dataObjects = data;
      });
  }
};
</script>

{{dataObjects.title}}
{{dataObjects.slug}

{{dataObjects.content}

导出默认值{
名称：“数据”，
数据（）{
返回{
dataObjects:null，
};
},
安装的（）{
bucket.getObject({
id:（（BUCKET id）），//对象id
道具：“slug，title，content”//只获取您需要的
})
。然后（（数据）=>{
//将返回值指定给vue实例的dataObjects属性。
this.dataObjects=数据；
});
}
};

在template部分，您可以看到我使用了大括号来呈现dataObjects的内容（我不确定数据的结构）

您还可以从需要阅读的

上的示例中学习，它将帮助您理解如何获取数据并将其注入组件