使用checkbox和inputbox中的值将属性模型值绑定到数组

Question

我正在实施v-for，如下所示：

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>

最初SelectedType是空数组对象。

在Vue中是否有任何方法可以在相同的数组对象上将Id推送到PayTypeId，将输入的值推送到Remarks？

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

SelectedType是一个对象数组，它的签名看起来像SelectedType:[{PayTypeId:0, Remarks:''}]。

是否可以将复选框和输入框中的值映射到对象数组？

Answer 1

你需要的是有点复杂。我看到的最干净的解决方案是：

• 分别跟踪选中的复选框和键入的备注，
• 将SelectedType转换为合并这些值的computed property。

在下面的示例中，选中的复选框位于selectePayTypeIds，输入的备注位于typedRemarks。

注意SelectedType已不在data但现在在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>

使SelectedType计算属性再次可编辑/可分配

由于您实际上也希望能够为SelectedType属性分配值，因此我们需要在set计算中定义SelectedType函数。

要显示分配给SelectedType的值的示例，请查看下面的created函数。

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>