Question

我想使用html引导卡为简单的“黑板”呈现产品列表。我必须对http请求使用vue组件和axios。我无法正常使用

[Vue警告]：属性或方法“ angebote”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

列出这些产品的最简单方法是什么？

我设法使用新的vue实例使其工作（第一个代码段），但是当我对组件尝试相同的操作时，我无法使其工作（第二个代码段）。我想使用组件，因为我也必须做路线。

var app = new Vue({
    el: '#app',
    data: {
        angebote: [],
        angebot: {
            id: null,
            title: null,
            modul: null,
            studiengang: null,
            user: null,
            price: null,
            description: null



        },
        config: {
            headers: {
                'content-type' : 'application/json',
                'x-apikey': 'myapi'
            }
        }
    },

不工作

Vue.component('app-angebot', {
  data: function() {
    return {
      angebote: [],

      config: {
        headers: {
          'content-type': 'application/json',
          'x- apikey': 'myAPIkey'
        }
      }
    }
  },
  mounted: function() {
    this.getAngebot();
  },
  methods: {
    getAngebot: function() {
      axios.get('https://angebot-5f4b.restdb.io/rest/angebot', this.config)
        .then((response) => {
          this.angebote = response.data.angebote;
        })
        .catch((response) => {
          console.log(error);
        });
    }

  },
  template: `             
   <div class="card h-30">
       <div class="card-body">
           <h4 class="card-title">
               <a href="angebot.html" v-if="angebote.title =!null"> {{angebote.title}}</a>
           </h4>
           <h6>{{angebote.price}}</h6>
           <p class="card-text">{{angebote.description}}</p>
       </div>
       <div class="card-footer">
           <small class="text-muted">
               Angeboten von: <a href="userO.html">{{angebote.user}}</a>
           </small>
       </div>
   </div>`
})

var app = new Vue({
  el: '#app',
});

我希望能够在HTML页面上使用v-for呈现所有数据库条目

尝试使用Axios使用来自HTTP请求的数据渲染Vue组件

0 个答案: