how to display data extracted from other website onto my html webpage using vuejs-CodePudding

I would like to display the data I extracted from an API website, I was able to do for displaying into the console but failed to display the same on the webpage. Can anyone please help me with this? I'm trying to display the id element from the bedroom lightstatus data only.

const importdata = new Vue ({
  el: '#importdata',
  data() {
    return {
      status:[]
    }
  },
  methods: {
    getStatus() {
      fetch('https://a13.sglms.com.my/sglms/api/ios/19/')
        .then(response => response.json())
        .then(data => this.status = data)
    }        
  }
});

This is my markup

<html>
  <head>
    <title>on off</title>
    <script src="cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script> 
    <script src="sglmsvue.js" defer></script>
  </head>
  <body>
    <div id="importdata">
      <div v-for="s in status" :key="s.id">
        <h1>{{s.id}}</h1>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

if the response you're fetching is this url then the status prop isn't a list, it's an object and you can't use it in a for loop, you can append the fetch data to status to make it work, e.g.:

methods: {
     getStatus() {
        fetch('https://a13.sglms.com.my/sglms/api/ios/19/')
          .then(response => response.json())
          .then(data => this.status.push(data))
     }

CodePudding user response：

It has been solved, the reason why it couldn't be displayed on the html webpage is because the mounted function is not added below methods.