मैं वर्तमान में एक jQuery पृष्ठभूमि से आने वाले VueJS को सीखने की कोशिश कर रहा हूं और मैंने कुछ ऐसा किया है जिसे मैं या तो समझ नहीं पा रहा हूं या गलत तरीके से करने की कोशिश कर रहा हूं। मैं VueJS और Laravel का उपयोग कर रहा हूँ। मैं अपने ब्लेड टेम्प्लेट में VueJS जोड़ता हूं।

मेरे पास डेटा की कुछ पंक्तियों के साथ तालिका स्थापित है। उन पंक्तियों में मेरे पास एक टेक्स्ट इनपुट फ़ील्ड है। प्रत्येक पंक्ति में दो चिह्न भी होते हैं जो मुझे पंक्ति को ऊपर या नीचे ले जाने की अनुमति देते हैं।

जब मैं आइकन पर क्लिक करता हूं तो मैं ऑर्डर फ़ील्ड को अपडेट करने के लिए अपने डेटाबेस को बताते हुए एक अक्षीय अनुरोध भेजना चाहता हूं। जब यह एक सफलता संदेश देता है तो मैं तालिका को नए आदेश के साथ पुनः लोड करना चाहता हूं।

वी-ऑनक्लिक आइकन पर क्लिक करने और एक अक्ष के साथ तालिका को मेरे डिव में पुनः लोड करने के बाद वी-ऑनक्लिक काम करना बंद कर देता है। साथ ही मैंने जो वी-मॉडल बाइंडिंग स्थापित की है वह भी काम करना बंद कर देती है। जब मैं टेक्स्ट इनपुट में कोई मान अपडेट करता हूं तो यह डेटा प्रॉपर्टी में मान को अपडेट नहीं करता है।

मैं जो हासिल करने की कोशिश कर रहा हूं उसका एक विचार देने के लिए मैंने एक jsFiddle जोड़ा है। मैं एक मार्ग प्राप्त करने के लिए axios का उपयोग करता हूं जो उत्पाद तालिका दृश्य देता है।

            ```reload : function(){
                url = '/products;
                axios.get(url).then(response => {
                    document.getElementById('products').innerHTML = response.data;
                });
            },```

https://jsfiddle.net/k8Lj4asb/1/

0
user960722 24 फरवरी 2020, 19:48
नमस्ते, आपका JSFiddle टूटा हुआ है। कृपया कम से कम अपना JSFiddle ठीक करें और फिर आपको कुछ उत्तर मिल सकते हैं।
 – 
Inch High
24 फरवरी 2020, 19:55

2 जवाब

VueJS में किसी तालिका को अद्यतन करने का यह उचित तरीका नहीं है। DOM में सीधे हेरफेर करके, आप उस साइट में परिवर्तन करते हैं जिसे Vue ट्रैक नहीं करता (और इसलिए इसके बारे में नहीं जानता), जो प्रतिक्रियाशीलता को तोड़ता है।

ऐसा करने का सही तरीका यह होगा कि आप अपनी सूची को Vuex-Store में स्टोर करें और वहां अपडेट करें। मैं यहां दिए गए उत्कृष्ट दस्तावेज़ीकरण का उपयोग करके विषय पर पढ़ने की सलाह देता हूं: https://vuex.vuejs.org/

0
Fresh Prince 24 फरवरी 2020, 19:55
Vuex किसी ऐसे व्यक्ति के लिए थोड़ा भारी हो सकता है जो अभी शुरू कर रहा है और एक jQuery पृष्ठभूमि से Vue सीखने की कोशिश कर रहा है। Vuex उसके उपयोग के मामले के लिए आवश्यक नहीं है लेकिन आप सही हैं कि DOM हेरफेर के कारण प्रतिक्रियाशीलता टूट रही है।
 – 
Inch High
24 फरवरी 2020, 19:58
उचित बिंदु, ऐसा करने के लिए Vuex आवश्यक नहीं है। ऐसा कहा जा रहा है, एक शुरुआत के रूप में मुझे Vuex के साथ ऐसा करने के बजाय इसे करने के बजाय कुछ समान करना वास्तव में आसान लगा।
 – 
Fresh Prince
24 फरवरी 2020, 20:13

मैं उत्पादों की वस्तु को जावास्क्रिप्ट में पास कर दूंगा, लारवेल के पास इसके लिए एक पैकेज है https: जेफरी वे द्वारा //github.com/laracasts/PHP-Vars-To-Js-Transformer

संपादित करें: ओह इसे रद्द करें, यह आपकी टूटी हुई पहेली से देखा गया था कि आप कुछ अलग करने की कोशिश कर रहे थे।

अपने अक्षीय प्रतिक्रिया हैंडलर में प्रतिक्रिया डेटा वाले उत्पादों के लिए बस डेटा प्रॉपर्टी अपडेट करें। फिर उस संपत्ति को VUE में लूप करें, किसी PHP साइड लूप की आवश्यकता नहीं है।

  <td v-for="product in products">
    <input v-model="product.id" type="text" :name="product.name">
  </td>
0
Vince Lowe 24 फरवरी 2020, 20:03
तो मुझे लगा कि अगर मैं डीबी वीयू में एक नए ऑर्डर के साथ पंक्तियों को अपडेट करने के बाद उत्पाद पंक्तियों वाली तालिका को फिर से लोड करता हूं तो यह देखेगा कि वी-मॉडल और वी-ऑनक्लिक फिर से होंगे और सब कुछ रहेगा काम में हो।
 – 
user960722
24 फरवरी 2020, 20:07
fetchProducts और reload दोनों विधियों के साथ आप जो करने का प्रयास कर रहे हैं, मैं वास्तव में उसका पालन नहीं कर रहा हूं। मुझे लगता है कि Vue में उत्पाद डेटा की बजाय सूची बनाने के लिए PHP का उपयोग करना आपकी समस्या हो सकती है?
 – 
Vince Lowe
24 फरवरी 2020, 20:13
FetchProducts एक json सरणी देता है जिसमें वे उत्पाद होते हैं जिन्हें आप डेटा प्रॉपर्टी में देखते हैं। मैंने सोचा था कि वी-मॉडल को फिर से देखने के लिए एक अक्ष के माध्यम से तालिका को पुनः लोड करने के बाद मुझे उन्हें रीफ्रेश करने की आवश्यकता हो सकती है?
 – 
user960722
24 फरवरी 2020, 20:19
उस स्थिति में, पुनः लोड करने के बजाय बस fetchProducts को फिर से कॉल करें और इसे उत्पादों को अपडेट करने दें
 – 
Vince Lowe
24 फरवरी 2020, 20:26