[Vuejs]-Binding property model value to array with the value from checkbox and inputbox

by

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>
👤acdcjunior

Leave a comment