无法在未定义、空值或原始值 bootstrap Vue 模态上设置反应式属性

Question

我需要帮助解决这个错误，app.js:108639 [Vue 警告]: 无法在未定义、null 或原始值上设置反应式属性：.

我正在使用 bootstsrap vue modal 并遇到此错误。下面是我的代码片段

首先这是我的模板片段

<div class="card-tools">
    
  <b-button class="btn btn-success" v-b-modal.modal-prevent-closing>
    Add Staff
    <i class="fas fa-user-plus fa-fw"></i>
  </b-button>

  <b-modal
    id="modal-prevent-closing"
    ref="modal"
    title="Enter Staff Info"
    @show="resetModal"
    @hidden="resetModal"
    @ok="handleOk"
  >
    <form ref="form" @submit.stop.prevent="handleSubmit">
      <b-form-group
        label="Name"
        label-for="name-input"
        invalid-feedback="Name is required"
        :state="nameState"
      >
        <b-form-input
          id="name-input"
          v-model="info.name"
          :state="nameState"
          required
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Email"
        label-for="email-input"
        invalid-feedback="Email is required"
        :state="emailState"
      >
        <b-form-input
          id="email-input"
          v-model="info.email"
          :state="emailState"
          required
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Phone"
        label-for="phone-input"
        invalid-feedback="Phone is required"
        :state="phoneState"
      >
        <b-form-input
          id="phone-input"
          v-model="info.phone"
          :state="phoneState"
          required
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Job Title"
        label-for="job_title-input"
        invalid-feedback="Job title is required"
        :state="phoneState"
      >
        <b-form-input
          id="phone-input"
          v-model="info.job_title"
          :state="job_titleState"
          required
        ></b-form-input>
      </b-form-group>
      
    </form>


</div>

这是我的脚本

import { BButton, BModal, VBModal } from "bootstrap-vue";

export default {
    
    components: {
        BButton,
        BModal
    },
    
    directives: { 
        'b-modal': VBModal 
    },
    
    data() {
        return {
            staffs: {},
            nameState: null,
            emailState: null,
            phoneState: null,
            job_titleState: null,
            
            info: {
                name: '',
                email: '',
                phone: '',
                job_title: ''
            },
            
            showModal: false
        }
    },

    methods: {
        getStaffs() {
            axios.get("api/user").then(({data }) => (this.staffs = data));
        },
        // createStaff () {
        // this.form.post('api/user')
        //     .then(({ data }) => { console.log(data) })
        // },
        checkFormValidity() {
            const valid = this.$refs.form.checkValidity()
            this.nameState = valid
            return valid
        },
        resetModal() {
            this.info = ''
        },
        handleOk(bvModalEvt) {
            // Prevent modal from closing
            bvModalEvt.preventDefault()
            // Trigger submit handler
            this.handleSubmit()
        },
        handleSubmit() {
            // Exit when the form isn't valid
            if (!this.checkFormValidity()) {
                // return 
                console.log(this.info)
            }
            // Hide the modal manually
            this.$nextTick(() => {
              this.$bvModal.hide('modal-prevent-closing')
            })
        }
    },
    
    created() {
        this.getStaffs();
    },
    
    mounted() {
        console.log('Component mounted.')
    }

};

我只是想在进行验证之前确保我的代码是正确的。提前致谢

Answer 1

我试图将您的代码实现为一个片段，但您的代码有一处导致错误。这是因为您将 this.info 设置为空字符串，而不是 data 属性.

中已经存在的对象

此外，请检查您正在使用的 b-vue 版本。它可能会导致警告问题。

我尽量不更改您的代码并按照我的理解模拟您的问题。如果我用错误的目的编写代码，请告诉我

new Vue({
  el: "#app",
  data: function() {
    return {
      staffs: {},
      nameState: null,
      emailState: null,
      phoneState: null,
      job_titleState: null,

      info: {
        name: '',
        email: '',
        phone: '',
        job_title: ''

      },

      showModal: false
    }
  },
  methods: {
    getStaffs() {
      this.staffs = {}
    },
    checkFormValidity() {
      const valid = this.$refs.form.checkValidity()
      this.nameState = valid
      return valid
    },
    resetModal() {
      this.info = {
        name: '',
        email: '',
        phone: '',
        job_title: ''

      }
    },
    handleOk(bvModalEvt) {
      // Prevent modal from closing
      bvModalEvt.preventDefault()
      // Trigger submit handler
      this.handleSubmit()
    },
    handleSubmit() {
      // Exit when the form isn't valid
      if (!this.checkFormValidity()) {
        // return 
        console.log(this.info)
      }
      // Hide the modal manually
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
    }
  },
  created() {
    this.getStaffs();
  },
  mounted() {
    console.log('Component mounted.')
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div class="card-tools">

    <b-button class="btn btn-success" v-b-modal.modal-prevent-closing>Add Staff<i class="fas 
                   fa-user-plus fa-fw"></i></b-button>



    <b-modal id="modal-prevent-closing" ref="modal" title="Enter Staff Info" @show="resetModal" @hidden="resetModal" @ok="handleOk">
      <form ref="form" @submit.stop.prevent="handleSubmit">
        <b-form-group label="Name" label-for="name-input" invalid-feedback="Name is required" :state="nameState">
          <b-form-input id="name-input" v-model="info.name" :state="nameState" required></b-form-input>
        </b-form-group>
        <b-form-group label="Email" label-for="email-input" invalid-feedback="Email is required" :state="emailState">
          <b-form-input id="email-input" v-model="info.email" :state="emailState" required></b-form-input>
        </b-form-group>
        <b-form-group label="Phone" label-for="phone-input" invalid-feedback="Phone is required" :state="phoneState">
          <b-form-input id="phone-input" v-model="info.phone" :state="phoneState" required></b-form-input>
        </b-form-group>
        <b-form-group label="Job Title" label-for="job_title-input" invalid-feedback="Job title is required" :state="phoneState">
          <b-form-input id="phone-input" v-model="info.job_title" :state="job_titleState" required></b-form-input>
        </b-form-group>

      </form>
    </b-modal>
  </div>
</div>

无法在未定义、空值或原始值 bootstrap Vue 模态上设置反应式属性

Cannot set reactive property on undefined, null, or primitive value bootstrap Vue modal

javascript

bootstrap-modal

vue.js

bootstrap-vue

无法在未定义、空值或原始值 bootstrap Vue 模态上设置反应式 属性

Cannot set reactive property on undefined, null, or primitive value bootstrap Vue modal

javascript

bootstrap-modal

vue.js

bootstrap-vue

无法在未定义、空值或原始值 bootstrap Vue 模态上设置反应式属性