मेरे पास एक MyList.vue है जो सीधे मेरे app.vue द्वारा आयात किया जाता है। MyList.vue में उप-घटक शामिल नहीं हैं, यह केवल आयात करता है:

import store from "../store/store";
import { USER_FETCHLIST } from "../store/actions/user";

और डेटा इस तरह दिखता है:

export default {
  data () {
    return {
      tableData: [],
      tableheader: []
    }
  },
  created: function(){
    store.dispatch(USER_FETCHLIST).then((res) => {

        this.tableData = res["data"]["tableData"]
        this.tableHeader = res["data"]["tableHeader"]
    })
},
  methods: {
    changeRecord: function(element){
      console.log(element)
    }
  }

}

MyList.vue में बूटस्ट्रैप-व्यू मोडल के लिए निम्न मार्कअप है:

<template v-for="(element, index) in tableData">
   <tr>
    //rest of the markup generating the columns carrying the data
      <td>
        <button v-on:click="changeRecord(element)" v-b-modal="`modal-${index}`">Aendern</button>

        <b-modal :id="'modal-' + index" title="BootstrapVue">
      <template v-for="(value, name) in element">

        <template v-if="typeof value==='object'">
          <template v-for="(nestedValue, nestedName) in value">
            <span>{{nestedName}}</span>
            <input type="text" :value="nestedValue" :class="'editFieldDivision-' + index">
          </template>
        </template>

          <template v-else>
            <span>{{name}}</span>
            <input type="text" :value="value" :class="'editFieldDivision-' + index">
          </template>
     </template>
    </b-modal>
  </td>
</tr>
</template>

बटन पर क्लिक करने का अंतिम परिणाम यह संवाद है:

https://imgur.com/4aOEjde

बैकएंड से प्राप्त डेटा के आधार पर संवाद में कम या ज्यादा इनपुटफील्ड हो सकते हैं।

हालाँकि, यह संवाद उपयोगकर्ता को पृष्ठभूमि में सूची से संबंधित रिकॉर्ड में परिवर्तन लागू करने की अनुमति देता है। चूंकि मैं वू के लिए बहुत नया हूं, मुझे नहीं पता कि उपयोगकर्ता इनपुट को "हथियाने" के लिए "व्यू-दृष्टिकोण" क्या होगा। क्या मुझे वी-मॉडल का उपयोग करना चाहिए? और यदि हां, तो मैं यह कैसे कर सकता हूं, क्योंकि डाला गया डेटा/अवलोकन गतिशील रूप से डाला जाता है। अंत में, डेटा को एक-आयामी में रखा जाएगा, जहां कुंजी-मान में संबंधित इनपुटफ़ील्ड का "लेबल" कुंजी के रूप में होता है, और संबंधित इनपुटफ़ील्ड का मान मान के रूप में होता है।

इसके अलावा, यदि उपयोगकर्ता संवाद को छोड़ देता है, तो संवाद के अंदर के परिवर्तनों को फ्रंटएंड पर डेटासेट पर लागू नहीं किया जाना चाहिए।

0
Narktor 18 मार्च 2020, 15:46

1 उत्तर

सबसे बढ़िया उत्तर

आप जो खोज रहे हैं उसे पूरा करने का एक तरीका यहां दिया गया है।

मूल वस्तु का संदर्भ रखें, और एक प्रति बनाएँ। फिर आप मोडल के अंदर अपने इनपुट में कॉपी का उपयोग करेंगे, इस तरह आप मूल वस्तु को संशोधित नहीं करेंगे। फिर छिपाने की घटना पर, जांचें कि क्या ठीक बटन दबाया गया था, यदि आप प्रतिलिपि से सभी मानों को मूल वस्तु में कॉपी कर रहे थे।

यदि रद्द करें क्लिक किया जाता है (या मोडल किसी अन्य तरीके से बंद होता है), तो आप बस चयनित ऑब्जेक्ट और कॉपी को साफ़ कर देते हैं।

यह समाधान lodash.set पद्धति का उपयोग करता है, इसलिए आपको इसे अपने में शामिल करना होगा परियोजना।

मैंने आपके मोडल को आपके टेबल लूप से भी बाहर कर दिया। चूंकि आप एक समय में केवल एक रिकॉर्ड संपादित कर सकते हैं, आपको अपने पृष्ठ पर केवल एक मोडल की आवश्यकता है।

new Vue({
  el: "#app",
  data() {
    return {
      data: [{
          Internal_key: "TESTKEY_1",
          extensiontable_itc: {
            description_itc: "EXTENSION_ITC_1_1",
            description_itc2: "EXTENSION_ITC_1_2",
          },
          extensiontable_sysops: {
            description_sysops: "EXTENSION_SYSOPS_1"
          }
        },
        {
          Internal_key: "TESTKEY_2",
          extensiontable_itc: {
            description_itc: "EXTENSION_ITC_2_1",
            description_itc2: "EXTENSION_ITC_2_2",
          },
          extensiontable_sysops: {
            description_sysops: "EXTENSION_SYSOPS_2_1"
          }
        }
      ],
      editingRecord: {
        original: null,
        copy: null
      }
    }
  },
  methods: {
    onEditModalHide(event) {
      if (event.trigger === "ok") {
        // if OK is pressed, map values back to original object.
        for(let fullKey in this.editingRecord.copy){
          const copyObject = this.editingRecord.copy[fullKey]
          /*
            this uses lodash set funcktion 
            https://www.npmjs.com/package/lodash.set
          */
          set(this.editingRecord.original, fullKey, copyObject.value)
        }
      }
      
      this.editingRecord.original = null
      this.editingRecord.copy = null;
    },
    changeRecord(record) {
      const flatCopy = this.flattenObject(record);
      this.editingRecord.original = record;
      this.editingRecord.copy = flatCopy;

      this.$nextTick(() => {
        this.$bvModal.show('edit-modal')
      })
    },
    flattenObject(ob) {
      var toReturn = {};

      for (var i in ob) {
        if (!ob.hasOwnProperty(i)) continue;

        if ((typeof ob[i]) == 'object' && ob[i] !== null) {
          var flatObject = this.flattenObject(ob[i]);
          for (var x in flatObject) {
            if (!flatObject.hasOwnProperty(x)) continue;
            console.log(x)
            toReturn[i + '.' + x] = {
              key: x,
              value: flatObject[x].value
            };
          }
        } else {
          toReturn[i] = {
              key: i,
              value: ob[i] 
          };
        }
      }
      return toReturn;
    }
  }
});
<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/lodash.set@4.3.2/index.js"></script>

<div id="app" class="p-4">
  <table class="table table-bordered">
    <tr v-for="element in data">
      <template v-for="field in element">
        <template v-if="typeof field==='object'">
          <td v-for="nestedObjectValue in field">
            {{nestedObjectValue}}
          </td>
        </template>
      <template v-else>
          <td>
            {{field}}
          </td>
        </template>
      </template>
      <td>
        <button class="btn btn-primary" @click="changeRecord(element)">
          Edit
        </button>
      </td>
    </tr>
  </table>
  <b-modal id="edit-modal" v-if="editingRecord.copy" @hide="onEditModalHide">
    <template v-for="obj in editingRecord.copy">
      <label>{{ obj.key }}</label>
      <input v-model="obj.value"  class="form-control"/>
    </template>
  </b-modal>
</div>
1
Hiws 18 मार्च 2020, 17:45