javascript - Vue Js仅间歇性地显示数据

Question

我想知道为什么 vue 有时只显示数据。我正确传递了 selectedclient，但 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

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

要弄清楚发生了什么，你安装了 vue devtools 吗？