javascript - 在vue multiselect中绑定(bind)v-model并在列表中基于它创建一个对象

Question

尝试使用 prime vue 和多选创建动态生成的对象列表。绑定(bind)到变量的简单 v 模型会创建选定选项的列表。

<MultiSelect v-model="selected_signals" optionLabel="name" optionValue="name" :options="simu_signals" />

假设 3 个信号的输出是:

selected_signals = ['signal1', 'signal2', 'signal3']

我需要的是，每次选择一个选项时，生成一个具有所选信号默认配置的对象。所以我需要的这 3 个信号的相同输出应该是:

selected_signals = [{
    name: 'signal1',
    interpolation: true,
    unit: '',
    type: 'origin'
},
{
    name: 'signal2',
    interpolation: true,
    unit: '',
    type: 'origin'
},
{
    name: 'signal3',
    interpolation: true,
    unit: '',
    type: 'origin'
},
]

为此苦苦挣扎，我尝试监听 @change 事件，然后创建结构，但在这种情况下，多选未绑定(bind)到任何值，因此我无法从列表等中删除它们。

Answer 1

vue-multiselect 有 @input 事件，但在此用例中您并不真正需要它。

检查下面的工作示例，其中我删除了 optionValue

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      selectedSignals: [],
      options: [{
       name: 'signal1',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
      {
       name: 'signal2',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
      {
       name: 'signal3',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
     ],
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562023337b3b233a223f25333a333522166478677866" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
  <link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="572122327a3a223b233e24323b323423176579667967" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
<div>
  <multiselect
    v-model="selectedSignals"
    track-by="name"
    placeholder="Select signal"
    label="name"
    :options="options"
    :multiple="true"
    :close-on-select="false"
  >
  </multiselect>
</div>
<pre class="language-json"><code>{{ JSON.stringify(selectedSignals) }}</code></pre>
</div>