jet
5 months ago
26
4
Vue

How can i use a singular form for both ``create`` an ``edit`` .

Posted 5 months ago by jet

here are my code both the list an the form component, plc anyone help

List component

<template>
  <div>
      <h1>User Account Type</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'useraccounttypeform' }" class="btn btn-primary">Create User</router-link>
          </div>
        </div><br />

        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>user_id</th>
                <th>account_type_id</th>
                <th>active</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(user, i) in users" :key="i">
                    <td>{{ user.id }}</td>
                    <td>{{ user.user_id }}</td>
                    <td>{{ user.account_type_id }}</td>
                    <td>{{ user.active }}</td>
                    <td>
                      <router-link :to="{name: 'useraccounttypeform', params: { id: user.id }}" class="btn btn-primary" @click="editUser(id)" >Edit</router-link>
                    <button class="btn btn-danger" @click.prevent="deleteUser(user.id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script>
  export default {
      name: 'useraccounttypeform',

      data() {
        return {
          users: [
              {
                id:'1',
                user_id:'The Good one',
                account_type_id:'this is a goog one',
                active:'yes'
              },  {
                id:'15',
                user_id:'The Good one',
                account_type_id:'this is a goog one',
                active:'yes'
              }
              ] 
        }
      },

    //   created() {
    //   console.log ('is working cool')
    // },

     methods: {
      deleteUser(id)
      {
        console.log('delete is working')
      },
      editUser: function(id) {

        console.log('edit is working')
      }
    }
  }
</script>

this is the form

<template>
  <div>
    <div class="wrapper fadeInDown">
        <div id="formContent">
    <h1>Create User</h1>
    
    <form>
        <div class="row justify-content-center align-items-center h-100 fadeIn second">
          <div class="col-md-12">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="user_id" v-model="users.user_id">
            </div>
          </div>
        </div>
        <div class="row justify-content-center align-items-center h-100 fadeIn second">
            <div class="col-md-12">
              <div class="form-group">              
                <input type="text" class="form-control" placeholder="account_type_id" v-model="users.account_type_id">
              </div>
            </div>
          </div>
        <div class="row justify-content-center align-items-center h-100">
            <div class="col-md-12">
              <div class="form-group">
                <label>Active:  </label>
                  <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                  </div>
                </div>
            </div>
          </div>

          <br />
          
          <div class="row justify-content-center align-items-center h-100">
            <div class="col-md-12">
             <div class="form-group">
                <router-link :to="{name: 'useraccounttypelistcomponent'}" class="btn btn-primary">Cancel</router-link>
                  <button type="button" class="btn btn-primary mb-2" @click="submit()">Upload </button>      
             </div>
      </div>
  </div>
    </form>
    </div>
  </div>
</div>
</div>

</template>

<script>
    export default {

props: {
    users: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
        data(){
        return {

        }
    },
    methods: {


       submit: function() {
            console.log('submit called');

          },
    }
  }
</script>

Please sign in or create an account to participate in this conversation.