以编程方式将控件添加到空数组时独立操作控件 - VueJS

Question

我有一个空的，里面填满了用户的输入。添加这些项目（键入并按回车键）后，还会使用单选按钮获得选项列表（是和否）。我需要能够独立选择是或否。截至目前，因为它们都共享相同的 v-model，所以当我修改它们中的任何一个时，它们都会发生变化。我怎样才能把它挑出来？

这是我的代码：

<div id="q-app">
  <div class="q-pa-lg">
    <q-input
      outlined
      label="Enter App Number"
      style="margin-bottom:20px"
      color="primary"
      square
      dense
      type="text"
      v-model="applicationbarcode"
      @change="addApplication">       
    </q-input>
    <div class="group" v-for="(appItem, index) in appList" :key="index">
      <span>Application #: {{appItem}}</span>
      <q-option-group
        v-model="issuegroup"
        :options="issueoptions"
        color="primary"
        inline
      ></q-option-group>
    </div>        
  </div>

new Vue({
  el: '#q-app',
  provide() {
    const menu = {};
    Object.defineProperty(menu, "appList", {
      enumerable: true,
      get: () => this.appList
    });
    return { menu };
  },
  data () {
    return {
      appList: [],      
      applicationbarcode: "",
      issuegroup: null,
      issueoptions: [
        {
          label: 'Yes',
          value: 'op1'
        },
        {
          label: 'No',
          value: 'op2'
        }
      ]
    }
  },
  computed: {
    appAdded() {
      return this.appList[this.applicationbarcode].index;
    }
  },    
  methods: {
    addApplication: function(index) {
      this.appList.push(this.applicationbarcode);
      this.applicationbarcode = ""; 
    }  
  }
})

这里也有一个 PLAYGROUND 给你。

Answer 1

您需要存储单个项目的数据。最简单的方法（恕我直言）是将 appList 转换为对象数组（而不是字符串）

    addApplication: function(index) {
      this.appList.push({barcode: this.applicationbarcode, issuegroup: null});
      this.applicationbarcode = "";

    }

并更新模板以使用对象数组


      <div class="group" v-for="(appItem, index) in appList" :key="index">
          <span>Application #: {{appItem.barcode}}</span>
          <q-option-group
            v-model="appItem.issuegroup"
            :options="issueoptions"
            color="primary"
            inline
          ></q-option-group>
      </div>

或者，您可以为这些值设置另一个数组，但如果您想开始删除项目，您可能需要担心匹配 keys/indices。

Answer 2

你只需要将issuegroup转换成字典即可。

  issuegroup: {},

并更新模板以使用 appItem 作为键。

  <q-option-group
        v-model="issuegroup[appItem]"
        :options="issueoptions"
        color="primary"
        inline
      ></q-option-group>

以编程方式将控件添加到空数组时独立操作控件 - VueJS

Manipulating controls independently when they are added programmatically to an empty array - VueJS

javascript

vue.js

vuejs2

quasar-framework