[英]Grouped Checkbox selected value into array in Vue js
我有一個分組復選框,其數據通過 API 調用填充。 我想編寫一個 VUE 代碼,這樣當用戶選擇一個復選框時,我想將 object 添加到復選框輸入的 v-model 上的數組綁定中。 我將按順序共享填充到復選框中的數據的有效負載以及下面的 VUE 和 HTML 代碼。
"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代碼:
<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一個 object 到綁定到復選框組的數組中,即 selectedPortfolios[item]。 請問我如何在Vue中實現這一點。
您可以只添加一個屬性來指示檢查 object,然后您可以使用它來創建計算值。
即使用
<input
v-model="item.$_checked"
type="checkbox"
class="filled-in"
/>
和
computed: {
selectedPortfolios()
{
return this.portfolioList.filter(item => item.$_checked);
}
},
代碼沙盒: 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.