javascript - 从vue js中的多选框中检索选定的值

Question

我很难从 Vue 中的多选框中检索值。用户选择任意数量的值后，我想检索这些值并提交到数据源。到目前为止还没有运气。下面是我的代码的摘录。

<div id="app">
   <select multiple v-bind:data-id="program.id" :disabled="!program.editable" v-model="program.dropDowns">
       <option>Microsoft</option>
       <option>IBM</option>
       <option>Google</option>
       <option>Apple</option>
   </select>
</div>

getPrograms: function() {
      axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
          this.programs = response.data.map(row => ({
            ...row,
            dateFormatted: toDDMMYY(row.Date),
            editable: false,
            dropDowns: ["Apple","Google"]
          }));
        console.log(this.programs)
        })
        .catch(function(error) {
          console.log(error);
        });
}

任何帮助将不胜感激。这是实际的pen

Answer 1

只是你错误地分配了下拉数据，需要如下更改:

模板略有变化:

<button v-else  @click="saveItem(program)">save</button>

和 saveItem() 方法如下:

saveItem (program) {
     program.isReadOnly = true
     program.editable = false
     console.log(program)
     alert(program.dropDowns)
    }