6
के साथ घटक विरासत मैं DataComponent आधार बनाने की कोशिश कर रहा हूं जिसमें बुनियादी सीआरयूडी इकाइयों से निपटने वाले कई अन्य घटकों के लिए आवश्यक सामान्य कार्यक्षमता होगी।
अब तक मैंvue js
//main.js
import Vue from 'vue';
new Vue({
el:'#app',
components:{
DataComponent,
Quotation
}
});//data-component.js
import Vue from 'vue';
export
default Vue.extend({
data() {
return {
saved: false
}
},
methods: {
//This method will be used by all inheriting components to alert
//the user regarding any changes which need to be saved.
alertSave(entity, fields, intFields) {
var changeCount = 0;
fields.forEach(function(field) {
var compareWith = this[field];
//Here "this" need to refer to the child instance but it does not
//how can I achieve?
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
intFields.forEach(function(field) {
var compareWith = parseInt(this[field]);
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
vm.saved = changeCount <= 0;
},
//sanitizeValue method works as intended as it does not have any reference to "this"
sanitizeValue(value) {
if (value) {
return String(value).trim();
} else {
return null;
}
},
//In getDbData method also this needs to refer to the inheriting child instance
//from where this method is called - how can I achieve it?
getDbData(entity) {
if (entity) {
this.dbTextFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbIntFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbObjFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbAppendedFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()]
});
this.saved = true;
}
}
});//quotation.js
import DataComponent from './data-component';
export default DataComponent.extend({
data(){
return{
id:0,
date:'',
remarks:'',
terms:'',
quote:{},
dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
dbObjFields:['inquiry', 'booking']
}
},
methods:{
setDbData(){
let entity = this.quote;
this.getDbData(entity);
//getDbData gives error as "this" in getDbData does not refer to this
// child component and so this.dbTextFields becomes undefined.
}
}
});How to achieve method inheritance as I am trying to do? Is it possible in Vue.js?
संपादित
अगर मैं नीचे के रूप में डेटा-component.js में विधि के हस्ताक्षर बदलने के लिए, वी एम के रूप में घटक ("इस") इनहेरिट के कहने से गुजर रहा है, यह
//data-component.js
import Vue from 'vue';
export
default Vue.extend({
data() {
return {
saved: false
}
},
methods: {
//This method will be used by all inheriting components to alert
//the user regarding any changes which need to be saved.
alertSave(entity, fields, intFields, vm) {
var changeCount = 0;
fields.forEach(function(field) {
//var compareWith = this[field];
var compareWith = vm[field];
//Changed "this" to vm (passed as a parameter)
//how can I achieve?
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
intFields.forEach(function(field) {
//var compareWith = parseInt(this[field]);
var compareWith = parseInt(vm[field]);
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
vm.saved = changeCount <= 0;
},
//sanitizeValue method works as intended as it does not have any reference to "this"
sanitizeValue(value) {
if (value) {
return String(value).trim();
} else {
return null;
}
},
//In getDbData method also this needs to refer to the inheriting child instance
//from where this method is called - how can I achieve it?
getDbData(entity, vm) { //instance as "vm" parameter
//change all this to vm
if (entity) {
vm.dbTextFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbIntFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbObjFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbAppendedFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()]
});
vm.saved = true;
}
}
});और फिर इनहेरिट घटक में
//quotation.js
import DataComponent from './data-component';
export default DataComponent.extend({
data(){
return{
id:0,
date:'',
remarks:'',
terms:'',
quote:{},
dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
dbObjFields:['inquiry', 'booking']
}
},
methods:{
setDbData(){
let entity = this.quote;
this.getDbData(entity, this);
//passing this (instance) as a parameter
}
}
});वी एम के रूप में तरीकों के उदाहरण ("इस") पासिंग, यह उम्मीद के रूप में काम करता है।
मुझे यकीन नहीं है कि यह करने का यह सबसे अच्छा तरीका है या नहीं। लेकिन फिर यह निश्चित रूप से विरासत नहीं है।
मैं जो करने की कोशिश कर रहा हूं उसे प्राप्त करने के लिए विरासत का उपयोग कैसे करें?
क्या आप कृपया मेरी आवश्यकता के लिए प्लगइन लिखने के लिए कैसे दृष्टिकोण कर सकते हैं?मैं प्लगइन लिंक पर जानकारी से पता नहीं लगा सकता। दिखाया गया उदाहरण तीन विकल्प वैश्विक तरीकों, निर्देश और उदाहरण विधि प्रदान करता है। मैं यह पता लगाने में असमर्थ हूं कि मैंने अपनी विधियों को प्लगइन परिभाषा में कहां रखा जाना चाहिए ताकि मैं इसे घटकों में 'this। $ Service.method()' के रूप में उपयोग कर सकूं। क्या आप मुझे कुछ संसाधनों के बारे में बता सकते हैं जहां मुझे एक प्लगइन लिखने के बारे में विस्तृत निर्देश या "हैलो वर्ल्ड" उदाहरण मिल सकता है? कृपया – Donkarnash
संपादित करें @ डोंकर्नाश – Jeff
संपादित करें मुझे बहुत मदद करने के लिए @ जेफ और मुझे मदद करने और प्लगइन कोड प्रदान करने के लिए समय बिताने के लिए धन्यवाद। एक बार फिर धन्यवाद। – Donkarnash