Question

因此，尝试从Vue组件中的v-if="diskstatus"提交表单数据时遇到问题。我可以在开发工具中看到数据对象正在填充数据，但是当我提交表单时它不会发送数据。

这是表格

b-modal

这是组件中的数据对象和方法

 <b-modal v-model="modalShow" id="myModal">
      <form>
        <div>
          <br>
            <input type="text" placeholder="Name" v-model="user.name">
          <br>
            <input type="text" placeholder="Email" v-model="user.email">
          <br>
            <input type="text" placeholder="Password" v-model="user.password">
          <br>
        </div>
        <div>
          <b-btn @click="modalShow = false">Cancel</b-btn>
          <b-btn variant="outline-primary" @click="addUser">Create</b-btn>
        </div>
      </form>
    </b-modal>

这是要分派的存储方法

data() {
    return {
       modalShow: false,
       user: {
          name: '',
          email: '',
          password: '',
       }
    }
  },
  components:{
    'b-modal': bModal,
  },
  directives: {
    'b-modal': bModalDirective
  },
  computed: {
    ...mapGetters(['users']),
  },
  methods: {
    addUser() {
      this.$store.dispatch('addUser', {
          name: this.user.name,
          email: this.user.email,
          password: this.user.password,
      })
    }
   },

如果我在处理后端数据之前进行了返回响应，则显示为空数据对象。有什么想法吗？

Answer 1

vuex action中的第一个参数是context对象，payload作为第二个参数传递

addUser(context, user) {
      return new Promise((resolve, reject) => {
        axios.post('/register', {
          name: user.name,
          email: user.email,
          password: user.password,
        })
        .then(response => {
          console.log(response)
          resolve(response)
        })
        .catch(error => {
          reject(error.response.data)
        })
      })
    }

如何在Vue中从B-modal提交表单数据

1 个答案: