[解決済み] Vue js: 複数オプションの選択

質問

目的を教えてください。 selectタグで複数の選択肢を選択できるようにする。

試行する。 は ドキュメンテーション を使用してバインドされるプロパティは、次のようになります。 v-model は配列でなければなりません。

エラーです。 [Vue warn]: バインディングにArray値を期待しましたが、Stringを受け取りました。

にバインドされている値( multipleSelections ) が配列である理由は何でしょうか？

以下は jsfiddle .

スクリプトを使用します。

new Vue({
el:'#app',
data: function() {
  return {
      multipleSelections: ["Mr Potato (Manager)"],
      data: null,
      multiple: "true",
      assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"]
    }
  },
  created() {
    console.log("selections: ",this.multipleSelections);
  }
});

htmlを使用します。

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div class='container' id='app'>
  <h2>{{"title".toUpperCase()}}</h2>
  <p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p>
  <select
    :multiple="multiple === 'true'"
    v-bind:class="{ 'fix-height': multiple === 'true' }"
    v-model="multipleSelections"
   >
    <option
      v-for="asset in assets"
      :value="asset">
      {{asset}}
    </option>
  </select>
{{ multipleSelections }}

解決方法は？

を与えるだけです。 multiple="true" が動作します。以下は、jsfiddleです。 リンク .

 <select
      multiple="true"
      v-bind:class="{ 'fix-height': multiple === 'true' }"
      v-model="multipleSelections"
      >