javascript - 使用复选框和输入框中的值将属性模型值绑定(bind)到数组

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 中，而是位于 compulated 中。

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 属性赋值，因此我们需要在 SelectedType 中定义一个 set 函数已计算。

要显示分配给 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>