Vue 多選列表 value取綁定值

官方案例如下：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

 

對v-model的解釋如下：

v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

 

需求：value 取值改為 Vue對象中的值，而非靜態值

 

方案： v-bind:value="getValue" ,即可。

v-bind官方解釋：

Attribute

Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令：

意思就是v-bind用於綁定屬性值，形式如下：

v-bind:attribute     簡寫形式   :attribute

 

結語：用到知識，才能對知識有更好的體會。 axios 對象中需要用 that 代替 this關鍵值的值，因為this 在對象中有默認特殊語義，那就是指向當前對象（axios對象中使用，當然是指向axios），所以，需要通過沒有特殊語義的that來更改vue對象中的值。