Question

我有2个数组，一个用于可能的复选框变体，另一个用于已保存的复选框。例如，VUEJS模板

<int-mongodb:inbound-channel-adapter
        id="simpleInboundAdapter" channel="pollingInputChannel"
        query-expression="new BasicQuery('{''status'' : ''New''}').limit(2)"
        collection-name="custommessages" entity-class="com.att.ssp.deviceeventprocessor.model.CustomMessage"
        mongodb-factory="mongoDbFactory">
        <int:poller fixed-rate="30000" max-messages-per-poll="1">
            <!-- <int:transactional synchronization-factory="txSyncFactory" /> -->
            </int:poller>
    </int-mongodb:inbound-channel-adapter>

我的问题是如何将新的复选框添加到已保存的数组或从已保存的数组中删除uncheckedbox＆amp;

Answer 1

我只是把savedcbx放到模型中，它就像上面的回答一样。 Vue很棒。

             <ul>
            <li v-for="cit in possable">
                <label>
                <input  
                    type="checkbox"
                    v-model="savedcbx"

                    //with model this not need too 
                    :checked="savedcbx.indexOf(+cit.id)>-1"
                    :value="cit.id"/>
                {{cit.rname}}
                </label>
            </li>
        </ul>

Answer 2

您只需要一个阵列即可实现切换。来自Arrays section of Vue.js docs:

HTML：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

Vue app：

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Answer 3

所以，假设您有这些数据：

data() {
  return {
    possable: [1,2,3,4,5],
    savedcbx: [3,4]
   }
}

如果你想在savedcbx中添加一个新项目，你只需将其推入数组（确保它已经不存在）

addSavedId (id) {
  // Don't add it if it already exists
  if(this.savedcbx.indexOf(id) !== -1) return;

  this.savedcbx.push(id);
}

删除项目：

removeSavedId (id) {
  let index = this.savedcbx.indexOf(id);

  // Nothing to remove if item is not in array
  if(index === -1) return;

  // Remove `index`
  this.savedcbx.splice(index, 1);
}

现在，当您调用addSavedId(id)和removeSavedId(id)函数以及参数id时，它取决于您。

复选框组的vuejs模型

3 个答案: