Vue Js只间歇地显示数据。

Question

我想知道为什么vue有时只显示数据。我正在正确地传递选择的客户端，但是selectedclient.name等只是间歇性地显示。有人知道发生了什么事吗？我使用vue2和laravel作为api。有时候一切似乎都有效，但有时却没有。我有点困惑.

<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>

Answer 1

这些是更多的提示，而不是解决方案:您不需要重新分配数据中的道具。有些东西应该是道具或数据。您可以将v模型放在数据上，但不能放在道具上，因为道具是不需要修改的。(你可以看看.sync吗？)

为了弄清楚这是怎么回事，你安装了vue devtools吗？