如何使用 vue

如何解决如何使用 vue

我使用的是 Vue.js 2 和 Laravel 7。

我想自动更改选择的选定选项值，但我不知道该怎么做。

这是代码：

HTML：

<template>
  <form method="POST">
    <div class="form-group">
      <h5>Edit an employee</h5>
    </div>
    <label for="user.informations">Users:</label>
    <select required v-model="user.information" @change="onChangeUser"
            class="form-control" id="user.informations">
      <option v-for="user in users" :value="user.id" :key="user.id">
        {{ user.fullname }}
      </option>
    </select>
    <div class="form-group">
      <label for="name">Name:</label>
      <input required :readonly="readonlyInput === true" v-model="userName"
             type="text" class="form-control" id="name">
    </div>
    <div class="form-group">
      <label for="surname">Surname:</label>
      <input required :readonly="readonlyInput === true" v-model="userSurname"
             type="text" class="form-control" id="surname">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input required type="email" :readonly="readonlyInput === true"
             v-model="userEmail" class="form-control" id="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input required type="password" :readonly="readonlyInput === true"
             v-model="userPassword" class="form-control" id="pwd">
    </div>
    <div class="form-group">
      <label for="permission">Permission:</label>
      <select required v-model="user.permissionId"
              :readonly="readonlyInput === true" class="form-control"
              id="user-permissionId">
        <option v-for="permission in permissions" :value="permission.id"
                :key="permission.id">
          {{ permission.id }}
        </option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

JavaScript：

export default {
  components: {},props: {
    permissions: {
      type: Array,required: true,default: () => [],},users: {
      type: Array,}
  },mounted () {
    console.log('Component mounted.');
  },computed: {},data: function () {
    return {
      user: {
        permissionId: '',information: ''
      },userName: '',userSurname: '',userEmail: '',userPassword: '',readonlyInput: true,selectedPermission: 0
    };
  },methods: {
    onChangeUser (event) {

      const index = event.target.options.selectedindex;

      this.userName = this.users[index].name;
      this.userSurname = this.users[index].surname;
      this.userEmail = this.users[index].email;
      this.userPassword = this.users[index].password;

      document.getElementById('user-permissionId')
        .value = this.users[index].permission; //problem

      this.readonlyInput = false;
    }
  }
};

选择 user-permissionId 具有所有权限 ID。选择 user.informations 拥有所有用户。

当我在 select user.informations 中选择一个选项时，我会运行 onChangeUser(event) 函数，该函数应该自动选择具有所选用户的权限。

例如，如果所选用户具有权限 2，我应该在选择 user-permissionId 中自动选择值为 2 的选项。