2016-10-29 7 views
3

VueJS 1.0に問題があり、この動作はVueJS 2.0で機能します。 VueJS 1.0では、整数のリストがあり、チェックボックスのvモデルがバインドされていれば、整数のリストはチェックされた属性としてマップされません。ここでVueJS CheckboxモデルIntsの配列

は次にここにHTML

<div id="app"> 
    <div class="col-sm-offset-3 col-sm-4 clearfix text-center"> 
    <h4>On Each Day of The Week</h4> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox1" v-model="schedules[0].by_days" value="1"> M 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox2" v-model="schedules[0].by_days" value="2"> Tu 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox3" v-model="schedules[0].by_days" value="3"> W 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox4" v-model="schedules[0].by_days" value="4"> Th 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox5" v-model="schedules[0].by_days" value="5"> F 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox6" v-model="schedules[0].by_days" value="6"> Sa 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="inlineCheckbox7" v-model="schedules[0].by_days" value="7"> Su 
    </label> 
    <div class="clearfix"></div> 
    </div> 
    By Days: {{ schedules[0].by_days.join(', ') }} 
</div> 

ではJavaScriptです:

new Vue({ 
    el: '#app', 
    data: { 
     schedules: [ 
      { 
      'by_days': ["1", 2, 3] 
      } 
     ] 
    } 
}) 

出力が "1" を正しくcheckboxed持っていますが、2 & 3になる整数であり、確認されて表示されません。 VueJS 2.0ではこれが動作しますが、VueJS 1.0では動作しません。

フルJSFiddle

がここにあります:私は答えを見つけた https://jsfiddle.net/qf5gqsg6/

答えて

0

、私はちょうど入力からの値に頼るのではなく、バインドに入力する値を設定する必要があります。

ので、代わりの:

<input type="checkbox" v-model="schedules[0].by_days" value="2"> M 

それがために必要な:もちろん

<input type="checkbox" v-model="schedules[0].by_days" v-bind:value="2"> M 

を混合文字列と整数のリストがある場合、これは動作しませんが、それはで動作しますすべてが整数だった私の場合。

+0

にあなたのあなたのチェックボックスの入力要素valueを変更しても、理由値 'で数2 =「2」'の文字列ではなく、番号です。 –

0

変更してデータ["1",2,3]

[1,2,3]には:value