javascript - how to change selected option value with vue

Question

I am using Vue.js 2 and Laravel 7.

I would like to authomatically change the selected option value of a select, but I don't know how to do that.

This is the code:

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,
      required: true,
      default: () => [],
    }
  },
  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;
    }
  }
};

The select user-permissionId has all the permissions id. The select user.informations has all the users.

When I select an option in the select user.informations I run the function onChangeUser(event) that should authomatically select the permission that has the selected user.

For example, if the selected user has the permission 2 I should authomatically select the option with value 2 in the select user-permissionId.

question from:https://stackoverflow.com/questions/65861783/how-to-change-selected-option-value-with-vue

Answer 1

Waitting for answers