Я новичок в Vue и работаю с API композиции Vue 3. Я также использую Vuetify, поэтому код диалога скопирован из их примера. Надеюсь, я не усложнил это, смешав это со своим обучением. У меня есть основной список пользователей, в настоящее время заполненный массивом javascript. Идея представляет собой довольно распространенную настройку, в которой перечислены все пользователи в массиве, а ссылка пользователя открывает диалоговое окно для редактирования информации о пользователе. Также есть ссылка «Добавить пользователя», чтобы открыть диалоговое окно для добавления пользователя.

Пока что в моем коде я могу открыть диалоговое окно, когда я щелкаю имя. Я не могу заставить его открыться при нажатии на ссылку «Добавить пользователя». Оба они вызывают один и тот же метод, но ссылка «Добавить пользователя» просто передает значение null вместо значения пользователя. При нажатии на ссылку для пользователя, хотя диалоговое окно открывается, оно не устанавливает свойство пользователя для заполнения формы. Итак, у меня есть пара вопросов. Как открыть диалоговое окно по ссылке «Добавить пользователя» и как ввести пользователя по ссылке пользователя. Основной код ниже.

store.js

import { reactive } from 'vue'

class Store{
    constructor() {
        this.state = reactive({
            users: [
                { id: 1, firstName: "John", lastName: "Smithers" },
                { id: 2, firstName: "Mary", lastName: "Smithers"}
            ],
            currentUserId: null
        })
    }
    
    addUser(){
        this.state.currentUserId = null;
    }
}

export const store = new Store()

UserList.vue

<script setup>
import { ref } from 'vue'
import {store} from '../services/store.js'
import UserForm from './UserForm.vue'

const userform = ref(null)
const openDialog = (user) => {
  userform.user = user
  userform.value.openDialog()
}
</script>

<template>
  <table>
    <thead>
    <tr>
      <th>Users</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for = "user in store.state.users" :key = "user.id">
      <td><a href = "javascript:;" @click = "openDialog(user)">{{ user.firstName }} {{ user.lastName }}</a></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan = "2" class = "text-center" style = "padding:20px 0">
        <a href = "javascript:;" @onclick = "openDialog(null)">Add User</a>
        <UserForm user = "null" ref = "userform"></UserForm>
      </td>
    </tr>
    </tfoot>
  </table>
</template>

UserForm.vue

<script setup>
import {ref} from 'vue'

const dialog = ref(false)
const save = () => {
  console.info('saving')
}
const openDialog =() => {
  dialog.value = true;
}
const props = defineProps({
  user: {
    type: Object,
    required: true,
    firstName: String,
    lastName: String
  },
  openDialog: {
    type: Boolean
  }
})

const emits = defineEmits(['save'])
defineExpose({
  openDialog
});

</script>

<template>
  <form>
    <v-row justify = "center">
      <v-dialog
          v-model = "dialog"
          persistent
          width = "1024"
      >
        <template v-slot:activator = "{ props }">
        </template>
        <v-card>
          <v-card-title>
            <span class = "text-h5">Add a User</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>

                <v-col cols = "12" lg = "4" sm = "4" xs = "12">
                  <v-text-field
                      label = "First name*"
                      required
                      v-model = "props.user.firstName"
                  ></v-text-field>
                </v-col>

                <v-col cols = "12" lg = "4" sm = "4" xs = "12">
                  <v-text-field
                      label = "Middle name"
                      hint = "example of helper text only on focus"
                  ></v-text-field>
                </v-col>

                <v-col cols = "12" lg = "4" sm = "4" xs = "12">
                  <v-text-field
                      label = "Last name"
                      hint = "example of helper text only on focus"
                      v-model = "props.user.lastName"
                  ></v-text-field>
                </v-col>
                
              </v-row>  
                
              <v-row>
                <v-col cols = "12" lg = "6" sm = "6" xs = "12">
                  <v-text-field
                      label = "Email*"
                      required
                  ></v-text-field>
                </v-col>
                <v-col cols = "12" lg = "6" sm = "6" xs = "12">
                  <v-text-field
                      label = "Password*"
                      type = "password"
                      required
                  ></v-text-field>
                </v-col>
              </v-row>
              
              
              <v-row>
                <v-col
                    cols = "12"
                    sm = "6"
                >
                  <v-select
                      :items = "['0-17', '18-29', '30-54', '54+']"
                      label = "Age*"
                      required
                  ></v-select>
                </v-col>
                <v-col
                    cols = "12"
                    sm = "6"
                >
                  <v-autocomplete
                      :items = "['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                      label = "Interests"
                      multiple
                  ></v-autocomplete>
                </v-col>
              </v-row>
            </v-container>
            <small>*indicates required field</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                color = "blue-darken-1"
                variant = "text"
                @click = "dialog = false"
            >
              Close
            </v-btn>
            <v-btn
                class = "ma-2"
                color = "primary"
                @click = "save"
            >
              <v-icon
                  start
                  icon = "mdi-checkbox-marked-circle"
              ></v-icon>
              Save
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </form>
</template>