Vue-表單提交

template

<form @submit.prevent="submitFrom">
<!-- 注冊提交事件 .prevent 阻止表單的默認提交行為 -->
簡單輸入:
<input type="text" v-model="formData.name">
單選：
<input type="radio" v-model="formData.open" value="1"> 開
<input type="radio" v-model="formData.open" value="0"> 關
多選:
<input type="checked" v-model="formData.huolg"/> 火龍果
<input type="checked" v-model="formData.yezi"/> 椰子
下拉選擇框:
<select v-model="formData.weidao">
<option value="xl">香辣</option>
<option value="ml">麻辣</option>
<option value="qt">清湯</option>
<option value="yy">鴛鴦</option>
</select>
<button type="submit" value="確定"></button>
</form>

script

export default {
    data() {
      return {
        formData: {
          name: "",
          opn: "",
          huolg: "",
          yezi: "",
          weidao: "",
        }
      };
    },
    methods: {
      submitFrom() {
        console.log(this.formData);
      }
    },
  }