如何让用户能够编辑个人资料页面，并在编辑后保存数据（Vue.js + Laravel）

Question

我正在为一家公司制作网页应用程序，在个人资料页面中，我希望用户可以编辑详细信息并添加更多详细信息，然后保存它们。我尝试了许多方法，但它们都不起作用。

我希望用户可以编辑从数据库登录后获取的名字和姓氏。

      <v-dialog v-model="dialog">
        <v-card>
          <v-card-title>
            <span class="headline">Edit User</span>
          </v-card-title>

          <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12 sm6 md4>
                  <v-text-field v-model="user.firstName" label="First Name"></v-text-field>
                </v-flex>

                <v-flex xs12 sm6 md4>
                  <v-text-field v-model="user.lastName" label="Last Name"></v-text-field>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn color="blue darken-1" flat>Cancel</v-btn>

            <v-btn color="blue darken-1" flat>Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

- Tharani Karunathilaka

---

你能提供更多关于为什么它不工作的信息吗？例如响应代码。如果您正在使用vue.js发布此数据，您是否将其发布到带有某种令牌的API路由以绕过csrf验证？ - Michael Mano

我没有想法去做它。我在互联网上搜索了也无法完成它。是的，我正在使用 API 路由传递数据。 - Tharani Karunathilaka

Answer 1

创建一个表单，该表单向某个端点发送POST请求，并根据用户填写的内容更新数据。请参考此链接了解更多信息。原始答案翻译为“最初的回答”。

- Carlos Menezes

---

我在这里使用了一个对话框。 - Tharani Karunathilaka

Answer 2

我们需要向后端发送HTTP请求并使用响应保存数据。请参考此教程获取更多详细信息。 vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

我已经使用了这种方法。

- Tharani Karunathilaka