在Vue js中将复选框选择的值分组到数组中

Question

I have a grouped checkbox whose data is populated via an API call. I want to write a VUE code such that when a user selects a checkbox I want to add an object to the array binding on the v-model of the checkbox input. I'll share the payload of the data being populated into the checkbox and my VUE and HTML code below in that order.

  "data":[
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"MMF046094001",
         "fundName":"UNITED CAPITAL MONEY MARKET FUND"
      },
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"SIS046094001",
         "fundName":"UNITED CAPITAL STAFF INVESTMENT SCHEME"
      },
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"EUROB046094001",
         "fundName":"UNITED CAPITAL NIGERIAN EUROBOND FUND "
      }
  ]

VUE Code:

<div style="padding-top:40px;" class="col s3">
                <div class="input-field">
                    <h6 class="left-align">Select Portfolio Accounts</h6>
                    <template v-for="(item, key, index) in portfolioList">   
                        <p>
                            <label>
                                <input v-model="selectedPortfolios[item]" :value="item"  type="checkbox" class="filled-in" />
                                <span>
                                    {{ item.fundName }}                                 
                                </span>
                            </label>
                        </p>                  
                </template> 
                </div>
            </div>

What I want to achieve is that whenever a checkbox item is selected, I want to get these fields for that item "customerId":"046094","coreSystem":"symplusAM","accountId":"MMF046094001" and add it as an object into the array bounded to the checkbox group ie selectedPortfolios[item]. Please how do I achieve this in Vue.

Answer 1

You can just add a property that indicates checking on the object, which you can then use to create a computed value.

ie use

  <input
    v-model="item.$_checked"
    type="checkbox"
    class="filled-in"
  />

and

  computed: {
    selectedPortfolios()
    {
      return this.portfolioList.filter(item => item.$_checked);
    }
  },

codesandbox: https://codesandbox.io/s/tender-haslett-5658h?file=/src/App.vue:278-422

<template>
  <div id="app">
    <div style="padding-top:40px;" class="col s3">
      <div class="input-field">
        <h6 class="left-align">Select Portfolio Accounts</h6>
        <template v-for="(item, index) in portfolioList">
          <p :key="index">
            <label>
              <input
                v-model="item.$_checked"
                type="checkbox"
                class="filled-in"
              />
              <span>{{ item.fundName }}</span>
            </label>
          </p>
        </template>
      </div>
    </div>

    <div>
        <header>Selected</header>
        <div v-for="(portfolio, key, index) of selectedPortfolios" :key="index">
          {{ portfolio.fundName }}
        </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  computed: {
    selectedPortfolios()
    {
      return this.portfolioList.filter(item => item.$_checked);
    }
  },
  data() {
    return {
        "portfolioList":[
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"MMF046094001",
         "fundName":"UNITED CAPITAL MONEY MARKET FUND"
      },
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"SIS046094001",
         "fundName":"UNITED CAPITAL STAFF INVESTMENT SCHEME"
      },
      {
         "customerId":"046094",
         "coreSystem":"symplusAM",
         "accountId":"EUROB046094001",
         "fundName":"UNITED CAPITAL NIGERIAN EUROBOND FUND "
      }
  ]
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>