表單綁定

表單開發是 Web 開發中最常見的需求之一，幾個基本的 Vue 表單處理如下

<div class="input-box">
  <p>E-MAIL</p>
  <input type="text" placeholder="輸入email" v-model="email" />
</div>
<div class="input-box">
  <p>PASSWORD</p>
  <input type="text" placeholder="輸入密碼" v-model="password" />
</div>
<div class="input-box">
  <input type="checkbox" id="checkbox" v-model="checkbox" />
  <label for="checkbox">我已閱讀使用者條款</label>
</div>
<a class="btn" @click="handSubmit">送出</a>

const { ref } = Vue;
const App = {
  setup() {
    const email = ref("");
    const password = ref("");
    const checkbox = ref(true);
    const handSubmit = () => {
      console.log(email, password, checkbox);
    };
    return { email, password, checkbox, handSubmit };
  },
};

複選的 checkbox

<div>
  <ul>
    <li v-for="item in courseslist.tags" :key="item.tag">
      <input
        :id="item.tag"
        type="checkbox"
        :value="item.tag"
        v-model="courseslist.listArray"
      />
      <label :for="item.tag">{{ item.tag }}</label>
    </li>
  </ul>
  <a class="btn" @click="handSubmit">送出</a>
</div>

const { reactive } = Vue;
const App = {
  setup() {
    const courseslist = reactive({
      listArray: [],
      tags: [
        { tag: "JavaScript" },
        { tag: "Html" },
        { tag: "Css" },
        { tag: "Html5" },
        { tag: "Vuejs" },
        { tag: "React" },
        { tag: "Sass" },
        { tag: "Css3" },
        { tag: "Canvas" },
      ],
    });
    const handSubmit = () => {
      console.log(courseslist.listArray);
    };

    return { courseslist, handSubmit };
  },
};

下拉選單 select

<div class="select-box">
  <select v-model="cityActive">
    <option disabled value="">請選擇縣市</option>
    <option v-for="item in twZip.city" :value="item.name" :key="item.name">
      {{ item.name }}
    </option>
  </select>
  <select v-model="areaActive">
    <option disabled value="">請選擇區域</option>
    <option v-for="item in twZip.area" :value="item.name" :key="item.name">
      {{ item.name }}
    </option>
  </select>
</div>
<a class="btn" @click="handSubmit">送出</a>

const { onMounted, reactive, ref, watch } = Vue;
const App = {
  setup() {
    const twZip = reactive({ city: [], area: [] });
    const cityActive = ref("");
    const areaActive = ref("");

    watch(cityActive, (newCity) => {
      // 透過filter把特定縣市資料拉出來
      const newArr = twZip.city.filter((item) => item.name === newCity);
      areaActive.value = ""; // 每次變換時清空，才會顯示請選擇區域
      twZip.area = newArr[0].area;
    });

    const handSubmit = () => {
      console.log(cityActive.value);
      console.log(areaActive.value);
    };

    onMounted(() => {
      axios
        .get("https://vue-lessons-api.herokuapp.com/city/list")
        .then((res) => {
          twZip.city = res.data.twzip.city;
        })
        .catch((error) => {
          console.log(error);
        });
    });
    return { twZip, cityActive, areaActive, handSubmit };
  },
};

register 註冊

<div v-if="!isRegister">
  <div class="input-box">
    <p>NAME</p>
    <input
      type="text"
      placeholder="輸入使用者名稱"
      v-model="registered.username"
    />
    <p class="error" v-if="error_message.username">
      {{ error_message.username }}
    </p>
  </div>
  <div class="input-box">
    <p>PASSWORD</p>
    <input
      type="password"
      placeholder="輸入密碼"
      v-model="registered.password"
    />
    <p class="error" v-if="error_message.password">
      {{ error_message.password }}
    </p>
  </div>
  <div class="input-box">
    <p>E-MAIL</p>
    <input type="text" placeholder="輸入email" v-model="registered.email" />
    <p class="error" v-if="error_message.email">{{ error_message.email }}</p>
  </div>
  <div class="input-box">
    <p>年齡</p>
    <input type="number" placeholder="輸入年齡" v-model="registered.age" />
  </div>
  <div class="input-box">
    <input type="radio" id="boy" value="boy" v-model="registered.sex" />
    <label for="boy">boy</label>
    <input type="radio" id="girl" value="girl" v-model="registered.sex" />
    <label for="girl">girl</label>
  </div>
  <div class="input-box">
    <input type="checkbox" id="checkbox" v-model="registered.terms" />
    <label for="checkbox">我已閱讀使用者條款</label>
  </div>
  <a class="btn" @click="handClick">送出</a>
</div>
<div v-if="isRegister">
  <h1>註冊成功</h1>
</div>

const { reactive, ref } = Vue;
const app = {
  setup() {
    const isRegister = ref(false);
    const registered = reactive({
      username: "",
      password: "",
      sex: "",
      email: "",
      age: "",
      terms: false,
    });

    const error_message = reactive({});
    const handError = (error) => {
      // 把 error 的值傳進 error_message
      Object.keys(error).forEach((item) => (error_message[item] = error[item]));
      console.log(error_message);
    };

    const handClick = () => {
      axios
        .post(
          "https://vue-lessons-api.herokuapp.com/auth/registered",
          registered
        )
        .then((res) => {
          isRegister.value = true;
        })
        .catch((error) => {
          handError(error.response.data.error_message);
        });
    };

    return { registered, isRegister, handClick, error_message };
  },
};

Vue.createApp(app).mount("#app");