Vue form表單如何回現(xiàn)

本篇內(nèi)容介紹了“Vue form表單如何回現(xiàn)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

form 表單如何回現(xiàn)

在 Ant Design Of Vue (ant-design-vue) 中，回現(xiàn)不再是使用 v-model ，會提示你直接使用 v-decorator

        <a-upload

          v-decorator="[

            'logo',

            {rules: [{ required: true, message: '請上傳店鋪圖片' }], validateTrigger: ['change','blur']}

          ]"

          name="logo"

          accept=".png,.jpg,.jpeg,.svg"

          method="post"

          list-type="picture-card"

          class="avatar-uploader"

          :show-upload-list="false"

          :action="$upload_url"

          :headers="headers"

          :data="requestData"

          @change="handleChange"

        >

          <img width="100" height="100" v-if="formData.imageUrl" :src="formData.imageUrl" alt="avatar" />

          <div v-else>

            <div class="ant-upload-text">

              上傳

            </div>

          </div>

        </a-upload>

回顯的話，直接使用 this.form.setFieldsValue

this.form.setFieldsValue({"username":['username_ddddd'],"nickname":['nickname_ddddd']}); //設(shè)置值   

this.form.setFieldsValue({"username": 'username_ddddd', "nickname": 'nickname_ddddd'}); //設(shè)置值

this.form.getFieldsValue();// 獲取所有值

this.form.getFieldsValue(['username','nickname']); // 獲取某一個值

this.form.resetFields();  // 重置表單值

this.form.validateFields((err,fieldsValue) => {  // 校驗所有的值

  if (!err) {

    console.log(fieldsValue); //獲取數(shù)據(jù) {nickname: "實際值", username: "實際值"}

  }else {

    console.log(err);

  }

});

this.form.validateFields(['nickname'],(err,fieldsValue)=>{ // 校驗?zāi)硞€值

  if (!err) {

    console.log(fieldsValue); //獲取數(shù)據(jù) {nickname: "實際值"}

  }else {

    console.log(err);

  }

});

這里需要注意的是，有時候會控制臺發(fā)生一個警告，就是說，你在組件渲染的時候，給我這個表單設(shè)置值，關(guān)于You cannot set a form field before rendering a field associated with the value

    formData: {

      handler: function (val) {

        const { name, note } = val

        this.$nextTick(() => {

          if (this.type === 'edit') {

            this.form.setFieldsValue({

              name,

              note

            })

          }

        })

      },

      deep: true

    }

2. upload 組件在上傳的時候，會產(chǎn)生 x-request-with 請求頭發(fā)生跨域的問題，

需要給組件的 headers 設(shè)置 x-request-with 為 null

      headers: {

        'X-Requested-With': null

      },

“Vue form表單如何回現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！