在表单输入事件发生后,Bootstrap-Vue的折叠崩溃

时间:2018-07-16 17:31:36

标签: vuejs2 bootstrap-vue

我在Bootstrap-Vue主体中的表单崩溃了。我应该如何保持可见? 我尝试使用prevent和stop事件修饰符,但这没有帮助。 我还尝试将表单代码放在父组件中,因为起初它是在子组件中。

此外,由于我不希望表单中包含提交按钮,因此我故意没有提供提交功能。

collapse-parent.vue:

<b-collapse :id="'index-'+index" accordion="my-accordion" role="tabpanel">
  <b-card-body>
    <project-information v-bind:project="project"
                       v-bind:index="index">
    </project-information>
  </b-card-body>
</b-collapse>

projectInformation.vue:

`<div>
   <b-form @submit.stop.prevent="onSubmit" @reset="onReset">
     <b-form-group id="projectgroup"
                label="Project"
                label-for="projectlabel"
                horizontal>
       <b-form-input id="projectlabel"
                  type="text"
                  v-model="project.project"
                  @keyup.stop.prevent.native="setProject(index)">
       </b-form-input>
     </b-form-group>
   </b-form>
 </div>`

setProject方法:

setProject (index) {
  var json = JSON.stringify(this.testprojects, null, 4)

  var fs = require('fs')
  fs.writeFile('./src/renderer/components/DueDateView/testprojects.json', json, 'utf8', function (error) {
    if (error) {
      console.log('Failed' + error)
    } else {
      console.log('Written to disk: success')
    }
  })
}

我不知道我需要给你什么确切的信息,我希望有人能够给我指示。

0 个答案:

没有答案