programing

폼 전송 후 화면 새로고침(Vue.js)

kingscode 2022. 7. 11. 23:53
반응형

폼 전송 후 화면 새로고침(Vue.js)

Disconsid 명령어 작성 앱을 만들고 있습니다.고객이 서버와 올바르게 대화하여 원하는 것을 출력하도록 하고 있습니다.문제는 일단 양식을 제출하면 페이지가 새로 고쳐지지 않는다는 것입니다.아래에는 템플릿과 스크립트가 있습니다.

<template>
  <form v-on:submit="addCommand">
    <div id="container" class="col-md-5 m-auto">
      <div class="card card-body">
        <h1 class="text-center mb-3"><i class="fab fa-discord"></i> Command Creator</h1>
          <div class="form-group">
            <label for="command">Command</label>
            <input type="text" v-model="command" class="form-control" placeholder="Please enter a command." />
          </div>
          <div class="form-group">
            <label for="output">Output</label>
            <input type="text" v-model="output" class="form-control" placeholder="Please enter an output." />
          </div>
          <button type="submit" class="btn btn-primary btn-block">Create</button>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  name: 'Dashboard',
  data () {
    return {
      command: '',
      output: ''
    }
  },
  methods: {
    addCommand (e) {
      this.axios.post('http://localhost:3000/server', {
        command: this.command,
        output: this.output
      })
      e.preventDefault()
    }
  }
}
</script>

언급URL : https://stackoverflow.com/questions/54393506/reload-screen-after-submitting-form-vue-js

반응형