如何获取表单元素的 formId? [英] how can i get the formId of form element?

问题描述

我正在尝试获取表单元素的 formId.formId 用于发送用于推送通知的模板消息.我对 vuejs 及其组件知之甚少，所以我写了糟糕的代码.请不要关心变量的定义，而只关心表单元素.我试过 v-el、$ref、el，但我只得到未定义的元素.请帮帮我.

i'm trying to get the formId of the form element. formId is used to send the template message for push notification. i have poor knowledge of vuejs and its components so i wrote bad code. please don't care the definition of the variable but only form element. i tried v-el, $ref, el, but i only got element undefined. please help me.

<template>
  <view class="center" style="height:100vh;background-color:#ededed;">
    <uni-list class="my_data">
      <uni-list-item :title=name :note=user_id :thumb=avatar @click="to_detail('profile','profile')"/>
    </uni-list>
    <view class="center-list-top" v-if="userRole == roles.ADMIN"></view>
    <uni-list class="relative_data" v-if="userRole == roles.ADMIN">
      <uni-list-item :title="title_userlist" @click="viewUserList"></uni-list-item>
      <uni-list-item :title="title_stabyuser" @click="viewStatistics('user')"/>
      <uni-list-item :title="title_stabyeq" @click="viewStatistics('eq')"/>
    </uni-list>
    <view>
      <form ref="myForm" v-el:elForm report-submit=true>
        <view>
          <button v-on:click="submit()">submit</button>
          <!-- <button form-type="submit">Submit</button> -->
          <!-- <button form-type="submit" @click="sendTemplate()">Submit</button> -->
          <button form-type="reset">Reset</button>
        </view>
      </form>
      <!-- <button type="submit" @click="sendTemplate()">Send Template</button> -->
    </view>
  </view>
</template>

<script>
   import uniList from '@/components/uni-list/uni-list.vue'
   import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
   import config from '../../config.js'
   export default {
    components: {
      uniList,
      uniListItem
    },
    data() { // don't care this
      //////////////////////
      return {
        avatar:'/static/default/user_default_512.png',
        name : '',
        user_id : '',
        // user:{},
        extraIcon1: {
          color: '#008000',
          size: '22',
          type: 'list'
        },
        comment:false,
        pending:{},
        userRole: '',
        roles: {},
        title_userlist: this.$i18nMsg('User list'),
        title_stabyuser: this.$i18nMsg('Statistics by user'),
        title_stabyeq: this.$i18nMsg('Statistics by eq'),
        title_about: this.$i18nMsg('About'),
        is_id_Guest:true,
        template_id: '',
        /////////////////////////////////
      }
    },
    onLoad() {
    },
    methods: {
        submit: function(){
          console.log(this);
          ///////////////////////////////////////
          console.log(this.$els.elForm);    // 
          console.log(this.$refs.myForm);   // 
           /////////////////////////////////////
   }

  }
</script>

只有未定义".

推荐答案

你不需要在 onLoad 中包装方法，而是

you don't need to wrap methods inside onLoad, instead

<script>
   import uniList from '@/components/uni-list/uni-list.vue'
   import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
   import config from '../../config.js'
   export default {
    components: {
      uniList,
      uniListItem
    },
    data() { // don't care this
      //////////////////////
      return {
        avatar:'/static/default/user_default_512.png',
        name : '',
        user_id : '',
        // user:{},
        extraIcon1: {
          color: '#008000',
          size: '22',
          type: 'list'
        },
        comment:false,
        pending:{},
        userRole: '',
        roles: {},
        title_userlist: this.$i18nMsg('User list'),
        title_stabyuser: this.$i18nMsg('Statistics by user'),
        title_stabyeq: this.$i18nMsg('Statistics by eq'),
        title_about: this.$i18nMsg('About'),
        is_id_Guest:true,
        template_id: '',
        /////////////////////////////////
      }
    },
      methods: {
        submit: function(){
          console.log(this);
          ///////////////////////////////////////
          console.log(this.$els.elForm);    // 
          console.log(this.$refs.myForm);   // 
           /////////////////////////////////////
        }
      }
  }
</script>

这篇关于如何获取表单元素的 formId?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！