vue.js 处理json

<template>
  <div>
    <ul v-if="items">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 假设这是从服务器获取的 JSON 数据
      const jsonString = '[{"id": 1, "name": "Item 1"}, {"id": 2, "name": "Item 2"}]';
      this.items = JSON.parse(jsonString);
    }
  }
};
</script>

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = { name: 'John', age: 30 };
      fetch('/api/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      .then(response => response.json())
      .then(data => console.log('Success:', data))
      .catch((error) => console.error('Error:', error));
    }
  }
};
</script>

try {
  const obj = JSON.parse(jsonString);
} catch (error) {
  console.error('JSON parsing error:', error);
}

// 后端示例（Node.js）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});