Question

我在应用程序中使用Struts1.x。最近我使用了Vue js，因此，我使用相同的jsp页面进行添加和更新（在本例中为Company）。因此，当我单击“编辑”时，将提取详细信息，页面将重定向到该页面，并从操作类中设置表单值。

这是html部分

     <form action="company.do" method="post" name="companyForm">

<html:hidden property="method" value="doAddUpdateCompany" />
<html:hidden property="companyId" value="${companyForm.companyId}" />

<div class="row" >
        <div class="col-md-9">
          <div class="grid simple">
            <div class="grid-title ">
              <h4>
                <logic:equal value="addCompany" property="method" name="companyForm">
                    New <span class="semi-bold">Company</span>
                </logic:equal> 
                <logic:equal value="updateCompany" property="method" name="companyForm">
                    Edit <span class="semi-bold">Company</span>
                </logic:equal> 

              </h4>
              <div class="tools"> <a href="javascript:;" class="collapse"></a> <a href="javascript:;" class="reload"></a> <a href="javascript:;" class="remove"></a> </div>
            </div>
             <div class="grid-body">

<table class="tbl_wall" style="width: 100%"  >  


    <tr >
        <td class="fi_wall" >Company Name<span class="notify style16"> *</span></td>
        <td  class="fi_wall"  ><html:text property="companyName"  name="companyForm" styleClass="med_txt" /></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
    <td  class="fi_wall" valign="top" >Company Code<span class="notify style16"> *</span>&nbsp;(3 Letter)</td>
    <td  class="fi_wall" valign="middle" ><html:text property="companyCode" maxlength="3"  styleClass="med_txt" name="companyForm" /></td>
    <td>&nbsp;</td>
    </tr>
  <tr id="cmp">
    <td class="fi_wall">Company Type </td>
    <td class="fi_wall"><select name="companyType"  v-model="companyType">
    <option value="-1">select</option>

    <option v-for=" result in results " v-bind:value="result.commonId">
    {{ result.name}}</option>

    </select></td>                                  
    </tr>       
    <tr>

    <td colspan="3" align="center">
         <button type="button" class="btn btn-success" onclick="doSave()" ><i class="fa fa-save"></i> Save</button>  
          </td>
    </tr>   
</table> </form>

和vue部分

<script type="text/javascript">
new Vue({
    el: '#cmp',
    data: {
      results: [],
      companyType : '-1'

    },
  mounted() { 
     axios.get('/easyoffice/companyType.do?method=getCompanyTypeAjax').then(response => {
        this.results = response.data,
        this.companyType = document.forms['companyForm'].companyType.value

    })
     .catch(e => {
      this.errors.push(e) 
    })
    }
  });</script>

我使用this.companyType = document.forms['companyForm'].companyType.value来设置表单值，但是它不起作用。有什么想法吗？

在Vue Js中设置表单值

0 个答案: