Laravel - Vue (b. Inertiajs)：道具处理

Question

我正在使用Laravel + Inertiajs (Vue)。我正在渲染一个带有道具的页面。“组织”。

public function index()
{
    $this->access();
    $companyOrganisations = $this->user->companyUser->company->organisations;

    return Inertia::render('CompanySettings/CompanyOrganisations', [
        'organisations' => $companyOrganisations,
    ]);
}

索引视图：

<!-- Existing Organisations -->
<div class="col"
     v-for="(organisation, index) in organisations"
     :key="organisation.id"
     :ref="organisations">

    <!-- Code -->
</div>

<Link class="link-success"
      href="#"
      @click.prevent="createOrganisation()">
    <i class="fa fa-check-square-o p-1"></i>
</Link>

Vue.js: createOrganization()

export default {

    components: {
        Card,
        Textarea,
        Link,
    },

    props: [
        'organisations',
    ],

    data: function () {
        return {
            manageOrganisations: [],
            newOrganisation: {
                name: '',
                description: '',
            }
        }
    },

    methods: {
        createOrganisation() {
            axios.post('company-organisations-create', {
                name: this.newOrganisation.name,
                description: this.newOrganisation.description
            })
                .then((response) => {
                    // Add Organisation to DOM
                    this.organisations.push(response.data.newOrganisation);
                    console.log(this.organisations);        // <-- New Organization added is fine
                }).catch((error) => {
                window.Toast.error(error.message);
            });
        },
        // Other Code
    }
}

因此，在我将新的组织数据发送到服务器和数据库之后，我从服务器接收到作为json的新对象newOrganisation，并将其推送到this.organisations。到目前为止，它工作得很好。我看到新的Organization已经在DOM (v-for循环)中添加了一毫秒。直到，发生了一些局部刷新，新的Organization再次丢失- cauz它将恢复为旧值(从索引呈现)。

我如何保持新值&停止刷新道具。按旧值计算？或者我做错了什么？

非常感谢！

Answer 1

我不明白为什么需要在这里使用axios并处理Vue组件中的所有逻辑。

您可以简单地通过this.$inertia.post发出post请求，并在Laravel控制器中将用户重定向到您所在的页面。

通过这种方式，惯性将自动处理所有需要的更新。

JavaScript

export default {
   methods: {
      createOrganisation() {
         this.$inertia.post('company-organisations-create', {
            name: this.newOrganisation.name,
            description: this.newOrganisation.description
         })
      }
   }
}

PHP

// create new organization
return redirect()->back();