Vue.js 2 数据未显示在模板中

Posted 2023-02-22

【中文标题】Vue.js 2 数据未显示在模板中

【英文标题】：Vue.js 2 data not displayed in the template

【发布时间】：2022-01-22 17:22:17

【问题描述】：

我正在使用带有 axios 的 vue.js 2 / vue-cli。我的帖子显示（在墙上）时遇到问题。我已经提出了我的 axios 请求，已经获取了我的数据（在控制台中），我已经编写了我的模板并且......没有显示任何内容......非常感谢你的帮助

我的模板：

<template>
  <v-layout column>
    <v-flex xs4>
      <panel title="The Wall">
        <p v-for="post in posts" :key="post.index"> post.title  -  post.content </p>
      </panel>
    </v-flex>
  </v-layout>
</template>

我的脚本：

<script>
import Panel from '../components/Panel'
import PostService from "../services/PostService.js";

export default 
  components: 
    Panel
  ,
  data() 
    return 
     posts: null
    
  ,
  async mounted() 
      this.posts = (await PostService.getAllPosts()).data;
  

</script>

【问题讨论】：

@ziouzuw15 确保您的 API 正在返回数据。您可以检查其他事情没有错误 - jsfiddle.net/hareshhanat_27/9bje87gn/6

【参考方案1】：

例如添加一个名为 cidItem 的数据属性并将其绑定到您的道具，如下所示

<template>
  <div id="app" class="container" :cid="cidItem">

    <Images :cid="cidItem" />

    <Video :cid="cidItem"  />

    <TextType :cid="cidItem"  />

    <Card :cid="cidItem"  />

  </div>
</template>

<script>
  import axios from 'axios';
  import Images from "./components/Images";
  import Video from "./components/Video";
  import TextType from "./components/TextType";
  import Card from "./components/Card";

  export default 
    name: 'app',
    props: ["cid"],
    components: 
      Images,
      Video,
      TextType,
      Card
    ,
    mounted() 
      axios(method: "GET", "url": this.contentDeliveryUrl).then(result => 
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        , error => 
          console.error(error);
        );
    ,
    data() 
      return 
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F$this.cid%22%7D&scope=tree&store=testing',
        content: [],
        cidItem:'7e4301de-9c6e-4fab-9e68-3031b94d662d'
      
    
  
</script>

由于您的组件具有相同的结构，我建议使用mixins，创建一个名为 myMixins.js 的文件并在其中添加以下代码：

const myMixins = 
 props:['cid'],
  mounted() 
    axios(
      method: "GET",
      "url": this.contentDeliveryUrl
    ).then(result => 
      // eslint-disable-next-line
      this.content = amp.inlineContent(result.data)[0];
      console.log(this.content)
    , error => 
      console.error(error);
    );
  ,
  data() 
    return 
      contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F$this.cid%22%7D&scope=tree&store=testing',
      content: []
    
  


export default mixins;

并在每个组件内添加：

import myMixins from './myMixins'
    export default
          ....
         mixins: [myMixin]
      

【讨论】：

非常感谢纳德，但您的回答对我来说似乎很复杂。实际上我设法检索了我需要的数据为什么我应该为他们使用组件？