在Vuejs中检索道具数据，并记录到POST API中

<template>
  <div>
    <ul>
      <li v-for="prop in props" :key="prop.id">{{ prop.name }}</li>
    </ul>
    <button @click="recordProps">记录道具数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      props: [],
    };
  },
  created() {
    this.fetchProps();
  },
  methods: {
    fetchProps() {
      axios.get('/api/props')
        .then(response => {
          this.props = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    recordProps() {
      axios.post('/api/record', this.props)
        .then(response => {
          console.log('道具数据已记录');
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>