Início / coding / Perguntas / 79481054
Accepted
Chris
Asked: 2025-03-03 21:11:51 +0800 CST

Rails e Inertia.js Como implementar requisição POST

  • 772

Tenho um aplicativo Rails 8 que usa Inertia.js e Vue. Não tenho certeza de como implementar uma redirect_to()solicitação usando Inertia.js dentro do Rails. Minhas tentativas não estão funcionando. Estou usando https://github.com/skryukov/inertia_rails-contriba integração do Inertia.js no Rails.

O repositório do Github está emhttps://github.com/Chrisgo-75/rails8_inertiajs_vuejs

O fluxo de trabalho é

a) O botão HTML "Adicionar ao carrinho" pode ser encontrado em /app/frontend/pages/Store/Index.vue.

# /app/frontend/pages/Store/Index.vue

<template>
  <button
    @click="addToCart(product.id)"
    class="ml-4 rounded-lg py-1 px-2 text-white bg-green-600"
    >
    Add to Cart
  </button>
</template>

<script setup lang="ts">
import axios from "axios";
import { router } from '@inertiajs/vue3';

const addToCart = async (productId: number) => {
  try {
    const response = await axios.post('/line_items',
        { product_id: productId },
        { headers: { 'X-CSRF-Token': csrfToken } } // Include CSRF token
    );

    alert('Product added to cart!');

    // Extract the cart ID from the response.
    const cartId = response.data.cart_id;

    router.visit(`/carts/${cartId}`);
  } catch (error) {
    console.error('Error adding to cart: ', error);
    alert('Failed to add product to cart.');
  }
};
</script>

b) Clicar no botão "Adicionar ao carrinho" vai para a /app/controllers/line_items_controller.rbação Criar controlador.

  • Não consegui fazer o Inertia.js funcionar dentro desta ação de criação, usando um Rails redirect_to().
  • Então, atualmente estou cart_idretornando para o Vue como JSON.
# line_items_controller.rb

def create
    product = Product.find(params[:product_id])
    @line_item = @cart.line_items.build(product: product)

    if @line_item.save
      # redirect_to @line_item.cart, notice: "Line item was successfully created."
      # redirect_to @cart, notice: "Cart was successfully updated."
      # redirect_to inertia: cart_path(@cart), notice: "Cart was successfully updated."
      render json: { cart_id: @cart.id }
    else
      # redirect_to new_line_item_url, inertia: { errors: @line_item.errors }
      # render inertia: "Carts/Show", props: { cart: @cart, errors: @line_item.errors }
      render json: { errors: @line_item.errors.full_messages },
             status: :unprocessable_entity
    end
end # END def create

c) A ação Criar do Controlador LineItems cart_idretorna para /app/frontend/pages/Store/Index.vueonde ela executa router.visit('/carts/${cartId}').

Alguém tem uma solução para implementar uma redirect_to()requisição Inertia.js dentro do Rails?

ruby-on-rails

1 respostas

  1. Best Answer

    O Axios redireciona, mas você tem que lidar com a resposta final sozinho, que é o que você faz quando renderfaz um redirecionamento.

    O Inertia fornece uma api para solicitações manuais e lida com redirecionamentos e atualizações de página. Em vez de axios.postfazer isso:

    <template>
  <button @click="addToCart(product.id)">
    Add to Cart
  </button>
</template>

<script setup>
  import { router } from '@inertiajs/vue3';

  const addToCart = (product_id) => {
    router.visit('/line_items', {
      method: 'POST',
      data: { product_id },
    });
  }
</script>

    https://inertia-rails.dev/guide/manual-visits

    Ou use Linko componente:

    <template>
  <Link
    href="/line_items"
    method="post"
    :data="{ product_id: product.id }"
  >
    Add to Cart
  </Link>
</template>

<script setup>
  import { Link } from '@inertiajs/vue3'
</script>

    https://inertia-rails.dev/guide/links

    • 0

relate perguntas