I'm wondering why vue only shows data sometimes. I'm passing selectedclient correctly but selectedclient.name etc only shows intermittently. Does any one have any idea what's going on?. I'm using vue2 and laravel for the api. It all seems to work sometimes, but then sometimes doesn't. I'm a bit confused...

<template>
  <div>
    <b-form @submit.prevent="editclient">
      <b-form-group
        label="Client Name"
        label-for="clientname"
      >
        <b-form-input
          v-model="clientname"
          id="clientname"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Email"
        label-for="clientemail"
      >
        <b-form-input
          type="email"
          v-model="clientemail"
          id="clientemail"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Phone"
        label-for="clientphone"
      >
        <b-form-input
          v-model="clientphone"
          id="clientphone"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Address"
        label-for="clientaddress"
      >
        <b-form-input
          v-model="clientaddress"
          id="clientaddress"
        ></b-form-input>
      </b-form-group>

      <b-button type="submit">Submit</b-button>
    </b-form>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'EditClient',
  props: ['selectedclient'],
  data () {
    return {
      clientname: this.selectedclient.name,
      clientemail: this.selectedclient.email,
      clientphone: this.selectedclient.phone,
      clientaddress: this.selectedclient.address
    }
  },
  methods: {
    editclient: async function () {
      var id = this.selectedclient.id;
      var name = this.clientname;
      var email = this.clientemail;
      var phone = this.clientphone;
      var address = this.clientaddress;

      var client = new Array(id, name, email, phone, address);

      axios.post('http://localhost/ficticious/fApi/clientEdit', client)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  }
}
</script>

CodePudding user response：

These are more tips than solutions: you shouldn't need to re-assign props in your data. Something should be either a prop or a data. You can put a v-model on a data, but not on a prop, because props are not to be modified. (You could have a look at .sync?)

To figure out what's going on, have you got vue devtools installed?