亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從 Vue js 中的模態提交表單

從 Vue js 中的模態提交表單

萬千封印 2023-05-11 09:48:09
我需要從模式發送表單。不使用完整的 Vue 應用程序,而是在我的 HTML 頁面中插入 Vue.js。我用我當前的模態嘗試了很多不成功的事情,所以我將它簡化為我第一次使用的基本模態示例https://v2.vuejs.org/v2/examples/modal.html對于表單,我還使用了https://v2.vuejs.org/v2/cookbook/form-validation.html上的最基本的表單驗證示例(我在其他地方使用它)。我創建了這個不成功的小提琴:https://jsfiddle.net/JIBRVI/03qnok9m/53/Vue.component('modal', {  template: '#modal-template'})// start app// eslint-disable-next-line no-newnew Vue({  el: '#app',  data: {    showModal: false,    errors: [],    name: ''  },  methods: {    checkForm: function (e) {      if (this.name) {        return true      }      this.errors = []      if (!this.name) {        this.errors.push('Name required.')      }      e.preventDefault()    }  }})在基本模態示例中,我添加了帶有字段、提交按鈕和占位符以顯示錯誤的表單。還有輸入字段 ?name? 和數組 ?errors? 到應用程序中的數據部分。我還添加了 ?checkForm? 方法。主要錯誤說:屬性或方法“checkForm” 未在實例上定義,但在渲染期間被引用。通過初始化屬性,確保此屬性是反應性的,無論是在數據選項中,還是對于基于類的組件也許主頁可以與模態通信,因此無法使用主頁中的數據和方法。我也嘗試用表單制作一個組件,但它也沒有用。我無法與模態通信。任何幫助將不勝感激。
查看完整描述

1 回答

?
當年話下

TA貢獻1890條經驗 獲得超9個贊

您需要將name和checkform方法移動到modal組件。您目前已經在app組件中定義了這兩個,并試圖從組件中的模態訪問它modal。


Vue.component('modal', {

  template: '#modal-template',

  data(){

    return {

        name: '',

        errors: [],

    }

  

  },

  methods: {

    checkForm: function (e) {

      if (this.name) {

        return true

      }


      this.errors = []


      if (!this.name) {

        this.errors.push('Name required.')

      }


      e.preventDefault()

    }

  }

})


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號