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

问题在于您没有将任何内容传递给saveItem函数，因此没有发送任何program。

您只需要用saveItem替换saveItem(program)，就可以解决问题。

Answer 2

刚刚您分配了错误的下拉数据，需要进行如下更改：

模板上的改动很小

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

和saveItem（）方法如下：

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

从Vue JS中的多选框检索选定的值

2 个答案: