मैं v-for का उपयोग करके थोड़ा जटिल डेटा लूप कर रहा हूं। मेरे पास इसमें नया डेटा सेट जोड़ने के लिए एक टेक्स्ट बॉक्स है। तालिका में प्रत्येक सेल डबल क्लिक करने पर मोड को संपादित करने के लिए टॉगल करता है। जब कोई नई प्रविष्टियाँ नहीं जोड़ी जाती हैं तो यह ठीक काम करता है। लेकिन जब मैं 'एक श्रेणी जोड़ें' टेक्स्टबॉक्स का उपयोग करके एक नई प्रविष्टि जोड़ता हूं, तो डबल क्लिक ठीक से काम नहीं कर रहा है। यहां जेएसफ़िल्ड है। क्या कोई इस पर मदद कर सकता है?

https://jsfiddle.net/9b7ckjrt/1/

<div id="app">
  <greeting></greeting>
</div>

<template id="example">
  <div class="hello">
    <div>
      <table border="1">
        <thead>
          <tr>
            <td></td>
            <td></td>
            <td v-for="month in 3" :key="month">{{ month }} / {{ selectedYear }}</td>
          </tr>
        </thead>
        <tbody v-for="(subCategories, category) in expectedMonthlyBudget" :key="category">
          <tr v-for="(yearExpenses, subCategory, idx) in subCategories" :key="subCategory">
            <td :rowspan="Object.keys(subCategories).length + 1" v-if="idx == 0">
              {{ category }}
            </td>

            <td>
              {{ subCategory }}
            </td>

            <td v-for="month in 3" :key="month" @dblclick="toggleEditingMoney(yearExpenses[selectedYear][month])">
              <div v-if="!yearExpenses[selectedYear][month].editing">
                {{ yearExpenses[selectedYear][month].value }}
              </div>
              <div v-if="yearExpenses[selectedYear][month].editing">
                <input @keyup.esc="cancelEditingMoney(yearExpenses[selectedYear][month])" @keyup.enter="doneEditingMoney(yearExpenses[selectedYear][month])" @blur="doneEditingMoney(yearExpenses[selectedYear][month])" v-focus type="text" v-model="yearExpenses[selectedYear][month].value" />
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <input type="text" placeholder="Add a category..." @keyup.enter="addSubCategory(category)" @keyup.esc="cancelAddingSubCategory(category)" v-model="newCategory[category]" />
            </td>
            <td v-for="month in 3" :key="month"></td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</template>

Vue.component('greeting', {
  template: '#example',
  directives: {
    focus: {
      // directive definition
      inserted: function (el) {
        el.focus()
      }
    }
  },
  methods: {
    toggleEditingMoney: function(element) {
      this.beforeEditingCache = element.value;
      element.editing = true;
    },
    doneEditingMoney: function(element) {
      if(element.value.toString().trim() == '') { element.value = 0; }
      if(isNaN(element.value)) { element.error = true; }
      else { element.error = false; }

      element.editing = false;
    },
    cancelEditingMoney: function(element) {
      element.value = this.beforeEditingCache;
      element.editing = false;
    },
    cancelAddingSubCategory: function(category) {
      this.newCategory[category] = '';
    },
    addSubCategory: function(category) {
      for (var i = 3; i > 0; i--) {
        this.expectedMonthlyBudget[category][this.newCategory[category]] = {
            "2020": {
              "1": {
                "value": 0
              },
              "2": {
                "value": 0
              },
              "3": {
                "value": 0
              }
            }
          };
      }

      this.newCategory[category] = '';
    },
  },
  data: function() {
    return {
      selectedYear: 2020,
      cachedMoney: 0,
      newCategory: {
        "Income": '',
        "Expense": '',
        "EMI": '',
        "EquityInvestment": '',
        "DebtInvestment": ''
      },

      beforeEditingCache: 0,
      expectedMonthlyBudget: {
        "Income": {
          "Salary": {
            "2020": {
              "1": {
                "value": 1231312,
                "editing": false
              },
              "2": {
                "value": 324,
                "editing": false
              },
              "3": {
                "value": 324324,
                "editing": false
              }
            }
          },
          "Illegal": {
            "2020": {
              "1": {
                "value": 1231312,
                "editing": false
              },
              "2": {
                "value": 324,
                "editing": false
              },
              "3": {
                "value": 324324,
                "editing": false
              }
            }
          }
        },
        "Expense": {
          "Rent": {
            "2020": {
              "1": {
                "value": 1231312,
                "editing": false
              },
              "2": {
                "value": 324,
                "editing": false
              },
              "3": {
                "value": 324324,
                "editing": false
              }
            }
          },
          "Car": {
            "2020": {
              "1": {
                "value": 1231312,
                "editing": false
              },
              "2": {
                "value": 324,
                "editing": false
              },
              "3": {
                "value": 324324,
                "editing": false
              }
            }
          },
          "Bike": {
            "2020": {
              "1": {
                "value": 1231312,
                "editing": false
              },
              "2": {
                "value": 324,
                "editing": false
              },
              "3": {
                "value": 324324,
                "editing": false
              }
            }
          } 
        }
      }
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});
0
Sandeep 4 जिंदा 2020, 19:10

1 उत्तर

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

किसी ऑब्जेक्ट में गुण जोड़ते समय आप Vue के डॉक्स को चेंज डिटेक्शन कैविएट कहते हैं।

आपके कोड के संबंध में इसका क्या अर्थ है कि यह भाग

    addSubCategory: function(category) {
      for (var i = 3; i > 0; i--) {
        this.expectedMonthlyBudget[category][this.newCategory[category]] = {

Vue के चेंज डिटेक्शन फ्लो में नया ऑब्जेक्ट नहीं जोड़ेगा।

आपको Vue.set (या इसके उपनाम, this.$set) का उपयोग करना होगा:

    addSubCategory: function(category) {
      for (var i = 3; i > 0; i--) {
        this.$set(this.expectedMonthlyBudget[category], this.newCategory[category], {
            "2020": {
              "1": {
                "value": 0,
                "editing": false
              },
              "2": {
                "value": 0,
                "editing": false
              },
              "3": {
                "value": 0,
                "editing": false
              }
            }
          });
      }

      this.newCategory[category] = '';
    },

ध्यान दें कि मैंने "संपादन" संपत्ति (इसे toggleEditingMoney विधि के अंदर element.editing = true; के माध्यम से बनाने के बजाय) को भी प्रारंभ किया है, क्योंकि यह भी आवश्यक है इसलिए Vue को इसकी उपस्थिति के बारे में पता है।

Edit aged-moon-jcjn8

2
yuriy636 4 जिंदा 2020, 21:02
यदि इस उत्तर से आपके प्रश्न का समाधान हो गया है तो कृपया इसे स्वीकार करने के आगे चेक-चिह्न बटन पर क्लिक करके विचार करें :)
 – 
yuriy636
5 जिंदा 2020, 14:00