cargar datos de un id con inner join vue js

<template>
  <div>
    <!-- Display data from the inner join result -->
    <div v-if="joinedData">
      <p>{{ joinedData.id }}</p>
      <p>{{ joinedData.name }}</p>
      <!-- Add other properties as needed -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Declare variables to store data
      joinedData: null,
    };
  },
  methods: {
    // Fetch data using an API call or other method
    fetchData() {
      // Replace with your API endpoint or data retrieval logic
      const apiUrl = 'your_api_endpoint';

      // Make a request to fetch data
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          // Assuming data is an object with 'id', 'name', and other properties
          this.joinedData = data;
        })
        .catch((error) => {
          console.error('Error fetching data:', error);
        });
    },
  },
  mounted() {
    // Call the fetchData method when the component is mounted
    this.fetchData();
  },
};
</script>

<style scoped>
/ Add component-specific styles if needed /
</style>