v-model 與 v-for 起使用的注意事項

Vue 指令與表單應用

Vue3 的指令可以節省許多原生 JS 要寫的 DOM 元素綁定與事件監聽的語法，Vue 指令方便歸方便，但是如果有些地方沒有注意，表單就有渲染不出來的困擾，以下整理一下初入手 Vue 指令與表單應用要注意的事情。

checkbox 的雙向綁定與渲染

在使用 Vue 來做表單渲染與表單選項的雙向綁定時，要注意 v-model 的雙向綁定 與 v-for 的表單選項渲染 是兩件不同的工作，以 checkbox為例，在資料上面要有 2 個陣列分別對應 v-for 與 v-model：

• 要準備一個放入所有選項的陣列，讓 v-for 渲染在表單上，讓每個 checkbox 的 value 都可以 v-bind 到陣列的值。
• 因為 checkbox 可以複選，所以 v-model 要綁定到一個空陣列，把勾選的項目放入陣列中雙向綁定，讓資料與畫面連動。
• v-for 要用 v-bind 綁定 key 值，不然會出現 選項 與 勾選 不連動的靈異事件。

const app = {
  data() {
    return {
      heroInfo: {
        // v-model 要綁以下空陣列         
        loveHero: []
      },
      // v-for 要綁以下陣列
      heros: ["鋼鐵人", "美國隊長", "雷神索爾", "綠巨人浩克"]
    };
  }
};
Vue.createApp(app).mount("#app");

同時使用 v-for 與 v-model 的時候，要注意兩者下的位置，以 checkbox 為例：

• v-for 要下在外層，不能下在 <input> 標籤裡面，放在 <input> 會沒有作用。
• v-model 則要放在 <input>s 上面，value 要用 v-bind 去綁 v-for 的 item。

<div id="app">
  <form class="container p-2">
    <h3>超級英雄調查</h3>
<!-- v-for 要綁在外層的 div     -->
    <div class="form-check" v-for="(item,index) in heros">
<!-- v-model 則要綁在 input 上， input 的 value 則要用 v-bind 綁在 v-for 的 item上面 -->
      <input class="form-check-input" type="checkbox" :value="item" :id="item" :key="index + item" v-model="heroInfo.loveHero">
      <label class="form-check-label" :for="item">
        {{ item }}
      </label>
    </div>
    <hr>
    <ul>
      <li>英雄愛好: {{ heroInfo.loveHero }}</li>
    </ul>
  </form>
</div>

select 下拉選單的 v-for 渲染與 v-model 綁定

select 下拉選單 v-model 雙向綁定 與 v-for 選項渲染要注意的事項：

• v-model 要放在 select 標籤上，綁定 data 中的空字串。
• v-for 則要放在 option 標籤上， value 要 v-bind 到 v-for 的 item 上面。item 的名稱可以自訂。
  v-for 一樣要對應到 所有選項的空陣列。

const app = {
  data() {
    return {
      herolInfo: {        
        favoriteHero: '',        
      },
      heros: ['鋼鐵人', '美國隊長','綠巨人浩克','雷神索爾'],
    }
  }
}
Vue.createApp(app).mount('#app')

<div id="app">
  <form class="container p-2">    
    <div class="mb-3">
      <label for="favoritePet" class="mb-2">選擇英雄</label>
      <br>
      <select name="favoriteHero" id="favoriteHero"  v-model="herolInfo.favoriteHero">
        <option value="" disabled="disabled">請選擇英雄</option>
        <option :value="item" v-for="(item,index) in heros" :key="index + item">我是{{ item }}</option>
      </select>
    </div>
    <hr>
    <ul>     
      <li>選擇英雄: {{ herolInfo.favoriteHero }}</li>      
    </ul>
  </form>
</div>s