Binding property model value to array with the value from checkbox and inputbox

Question

I am implementing the v-for as follows:

new Vue({
  el: '#app',
  data: {
    PaymentType:[
    {Id: 1, Text:"Cash"},
      {Id: 2, Text:"Check"},
      {Id: 3, Text:"Paypal"}
   ],
   SelectedType:[]
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p> SelectedType {{ SelectedType }}</p>
  <div v-for="(pay, index) in PaymentType">
    <input type="checkbox" v-model="SelectedType" :value="{PayTypeId: pay.Id}" />
    {{pay.Text}}
    
    
    <input type="input" v-model="SelectedType" />
    <!-- What goes here on :value attributes? -->
  </div>
</div>

<div id="app">
      <p> SelectedType {{ SelectedType }}</p>
      <div v-for="(pay, index) in PaymentType">
          <input type="checkbox" v-model="SelectedType" :value="{PayTypeId: pay.Id}"/> />     
          {{pay.Text}}
          <input type="input" v-model="SelectedType" :value=""/> 
           <!-- What goes here on :value attributes? -->
      </div>
</div>

Initially SelectedType is empty array object.

Is there any way in Vue to push the Id's to the PayTypeId and the value from the input to Remarks, on same array objects?

new Vue({
  el: '#app',
  data: {
    PaymentType:[
      {Id: 1, Text:"Cash"},
      {Id: 2, Text:"Check"},
      {Id: 3, Text:"Paypal"}
   ],
   SelectedType:[]
  }
})

SelectedType is an array of object, it signature looks like SelectedType:[{PayTypeId:0, Remarks:''}].

Is it possible to map the value from checkbox and input box to a Array of Object?

You want the value in the input text to be added to the array, is that it? — acdcjunior
– acdcjunior, Commented Feb 23, 2018 at 21:49

tony19 · Accepted Answer · 2022-07-15 22:54:24Z

2

What you need is a bit complicated. The cleanest solution I see is to:

track the checked checkboxes and typed remarks separately, and
turning SelectedType into a computed property that merges those values.

In the example below the checked checkboxes are in selectePayTypeIds and the typed remarks are in typedRemarks.

Notice SelectedType is no longer in data but now in computed.

new Vue({
  el: '#app',
  data: {
    PaymentType:[
      {Id: 1, Text:"Cash"},
      {Id: 2, Text:"Check"},
      {Id: 3, Text:"Paypal"}
   ],
   selectePayTypeIds: {},
   typedRemarks: {}
  },
  computed: {
    SelectedType: function () {
      var vm = this;
      return Object.keys(vm.selectePayTypeIds).filter(function (selectedPayTypeId) {
            return vm.selectePayTypeIds[selectedPayTypeId];
      }).map(function (selectedPayTypeId) {
            return {PayTypeId: selectedPayTypeId, Remarks: vm.typedRemarks[selectedPayTypeId] || ''}
      });
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
      <p> SelectedType {{ SelectedType }}</p>
      <div v-for="(pay, index) in PaymentType">
          <input type="checkbox" v-model="selectePayTypeIds[pay.Id]" />
          {{pay.Text}}
          <input type="input" v-model="typedRemarks[pay.Id]">
          <!-- What goes here on :value attributes? -->
      </div>
</div>

Making the `SelectedType` computed property editable/assignable again

Since you actually want to also be able to assign values to the SelectedType property, we need to define a set function in the SelectedType computed.

To show an example of value being assigned to the SelectedType, have a look at the created function below.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    PaymentType:[
      {Id: 1, Text:"Cash"},
      {Id: 2, Text:"Check"},
      {Id: 3, Text:"Paypal"}
    ],
    selectePayTypeIds: {},
    typedRemarks: {}
  },
  created: function () {
    this.SelectedType = [{PayTypeId: 2, Remarks: 'remarks about two'}];
  },
  computed: {
    SelectedType: {
      get: function () {
        var vm = this;
        return Object.keys(vm.selectePayTypeIds).filter(function (selectedPayTypeId) {
            return vm.selectePayTypeIds[selectedPayTypeId];
        }).map(function (selectedPayTypeId) {
            return {PayTypeId: selectedPayTypeId, Remarks: vm.typedRemarks[selectedPayTypeId] || ''}
        });
      },
      set: function (newSelectedType) {
        var vm = this;
        newSelectedType.forEach(function(sType) {
          Vue.set(vm.selectePayTypeIds, sType.PayTypeId, true);
          Vue.set(vm.typedRemarks, sType.PayTypeId, sType.Remarks);
        });
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
      <p> SelectedType {{ SelectedType }}</p>
      <div v-for="(pay, index) in PaymentType">
          <input type="checkbox" v-model="selectePayTypeIds[pay.Id]" />
          {{pay.Text}}
          <input type="input" v-model="typedRemarks[pay.Id]">
          <!-- What goes here on :value attributes? -->
      </div>
</div>

edited Jul 15, 2022 at 22:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 24, 2018 at 3:14

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Rasik Over a year ago

I also need SelectedType in data because this is the object which i need to submit to API's.

acdcjunior Over a year ago

How are you getting it? Because this.SelectedType will still work, doesn't matter if it is at data or at computed.

Rasik Over a year ago

This SelectedType is submited to Api's and on Edit request i need to get value from API's and bind those value to the checkbox and inputbox

acdcjunior Over a year ago

I'm sorry, I noticed a mistake and fixed it. If you checked the answer before, please check it again.

Rasik Over a year ago

Is there any way to conditionally show the Input? <input type="input" v-model="typedRemarks[pay.Id]">, Show only when checbox is checked?

|

Collectives™ on Stack Overflow

Binding property model value to array with the value from checkbox and inputbox

1 Answer 1

Making the `SelectedType` computed property editable/assignable again

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Making the SelectedType computed property editable/assignable again

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Making the `SelectedType` computed property editable/assignable again