Блог

Пожалуйста, помогите, я пытаюсь отобразить несколько категорий на странице продукта, но я получаю неправильные категории. Существует много — много отношений. Не могу найти ответ в Google.

Таблица категорий

Таблица записей

таблица category_record

Страница продукта (Vue), помеченная желтым, отображается неправильная категория

Дерево папок и маршруты API

Categories.php

     class Categories extends Model
{
    public function records() {
        return $this->belongsToMany(Record::class, 'category_record',  'record_id', 'categories_id')->withTimestamps();
    }
}
 

Record.php

 class Record extends Model
{
    protected $fillable = [
        'name', 'price', 'description', 'units', 'image', 'size', 'color'
    ];

    public function categories() {
        return $this->belongsToMany(Categories::class, 'category_record',  'record_id', 'categories_id')->withTimestamps();
    }
}
 

RecordController.php

 class RecordController extends Controller
{
    public function index() {
        return RecordIndexResource::collection(
            Record::all()
        );
    }

    public function show($id) {
        return new RecordShowResource(Record::findOrFail($id));

    }

}
 

RecordShowResource.php

 public function toArray($request)
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
            'description' => $this->description,
            'price' => $this->price,
            'units' => $this->units,
            'size' => $this->size,
            'color' => $this->color,
            'image' => $this->image,
        ];
    }
 

Запись.vue для отображения данных:

 <template>
  <div class="review-page">
    <div class="record-wrapper" v-if="!loading">
      <div class="record-text">
        <img :src="'/storage/'   record.image" :alt="record.title" />
        <div class="record-title">{{ record.title }}</div>
        <hr />
        <div v-for="(category, index) in categories" :key="index">
          <p>Categories: {{ category.name }}</p>
        </div>
        <br />
        <p>Product Details</p>
        <div class="record-description">{{ record.description }}</div>
        <div class="record-details-price">amp;#8364;{{ record.price }}</div>
      </div>
      <record-options v-bind="record" />
    </div>
    <div class="loading" v-else></div>
  </div>
</template>
<script>
import RecordOptions from "./RecordOptions.vue";

export default {
  components: {
    RecordOptions,
  },
  data() {
    return {
      record: null,
      categories: [],
      loading: false,
    };
  },
  async created() {
    this.loading = true;
    await axios.get(`/api/records/${this.$route.params.id}`).then((response) => {
      this.record = response.data.data;
      this.loading = false;
    });
    axios
      .get(`/api/categories/${this.$route.params.id}`)
      .then((response) => {
        this.categories = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
 

пожалуйста, помогите мне найти способ.