ESLint Expected to return a value at the end of method - vue.js

i have this code
computed: {
termOptions() {
if (this.newSchedule.originCharges.serviceType !== 'If Any') {
return this.serviceOptions.filter((val) => val.name !== 'If Any');
}
},
isMoreThanToday() {
if (this.newSchedule.validFrom) {
const date = new Date();
const isMore = this.newSchedule.validFrom < date.getDate();
return isMore;
}
},
}
and i got an error saying expected return value at the of method. Is there any way to fix this? thank you.

This is ESLint error. It tells you that a computed property should always return some value.
Your computed properties return values only when the condition of the if is true and don't return anything when it's false.
computed: {
termOptions() {
if (this.newSchedule.originCharges.serviceType !== 'If Any') {
return this.serviceOptions.filter((val) => val.name !== 'If Any');
}
else {
return []
}
},
isMoreThanToday() {
if (this.newSchedule.validFrom) {
const date = new Date();
const isMore = this.newSchedule.validFrom < date.getDate();
return isMore;
}
else {
return false
}
},
}
See this page for details.

Related

I am writing a client side code to retreive a record but facing the below issue

I am writing this code using Xrm.Webapi.RetreiveRecord as below but I am getting the below error when debugging.
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
if (typeof (ContosoPermit) == "undefined") { var ContosoPermit = { __namespace: true }; }
if (typeof (ContosoPermit.Scripts) == "undefined") { ContosoPermit.Scripts = { __namespace: true }; }
ContosoPermit.Scripts.PermitForm = {
handleOnLoad: function (executionContext) {
console.log('on load - permit form');
},
handleOnChangePermitType: function (executionContext)
{
console.log('on change - permit type');
},
_handlePermitTypeSettings: function (executionContext) {
var formContext = executionContext.getFormContext();
var permitType = formContext.getAttribute("contoso_permittype").getValue();
if (permitType == null) {
formContext.ui.tabs.get("inspectionsTab").setVisible(false);
return;
} else {
var permitTypeID = permitType[0].id;
debugger;
Xrm.WebApi.retrieveRecord("contoso_permittype", permitTypeID).then(
function success(result) {
if (result.contoso_requireinspections) {
formContext.ui.tabs.get("inspectionstab").setVisible(true);
}
else {
formContext.ui.tabs.get("inspectionstab").setVisible(false);
}
},
function (error) { alert('Error' + error.message) });
}
},
__namespace: true
}

Custom directive to check the value of two or more fields

I tried my best to write a custom directive in Apollo Server Express to validate two input type fields.
But the code even works but the recording of the mutation already occurs.
I appreciate if anyone can help me fix any error in the code below.
This is just sample code, I need to test the value in two fields at the same time.
const { SchemaDirectiveVisitor } = require('apollo-server');
const { GraphQLScalarType, GraphQLNonNull, defaultFieldResolver } = require('graphql');
class RegexDirective extends SchemaDirectiveVisitor {
visitInputFieldDefinition(field) {
this.wrapType(field);
}
visitFieldDefinition(field) {
this.wrapType(field);
}
wrapType(field) {
const { resolve = defaultFieldResolver } = field;
field.resolve = async function (source, args, context, info) {
if (info.operation.operation === 'mutation') {
if (source[field.name] === 'error') {
throw new Error(`Find error: ${field.name}`);
}
}
return await resolve.call(this, source, args, context, info);
};
if (
field.type instanceof GraphQLNonNull
&& field.type.ofType instanceof GraphQLScalarType
) {
field.type = new GraphQLNonNull(
new RegexType(field.type.ofType),
);
} else if (field.type instanceof GraphQLScalarType) {
field.type = new RegexType(field.type);
} else {
// throw new Error(`Not a scalar type: ${field.type}`);
}
}
}
class RegexType extends GraphQLScalarType {
constructor(type) {
super({
name: 'RegexScalar',
serialize(value) {
return type.serialize(value);
},
parseValue(value) {
return type.parseValue(value);
},
parseLiteral(ast) {
const result = type.parseLiteral(ast);
return result;
},
});
}
}
module.exports = RegexDirective;

Vue Filter get back elements from an subobject

I have an object that looks like this:
{
"itemsTasks":[
{
"id":1,
"files":[
]
},
{
"id":2,
"files":[
]
}
]
}
Now I want to filter and get only back the files object from the object with a special id:
this.editedIndex = 1
this.editedItem.files = this.itemsTasks.filter((obj) => {
return obj.id === this.editedIndex;
})
But with this I get back the hole object. How can I now get back only the files part?
EDIT
With the help of #Shamsail I have found the solution
this.editedItem.files = getFilesFromItemsTasks(this.editedIndex, this.itemsTasks)
function getFilesFromItemsTasks(index, tasks) {
let result = tasks.filter((obj) => {
return obj.id === index
})
return result[0].files
}
may be you can use a function for it
this.editedIndex = 1
this.editedItem.files = getFilesFromItemsTasks();
getFilesFromItemsTasks(){
let result = this.itemsTasks.filter((obj) => {
return obj.id === this.editedIndex;
})
return result.files
}

Value not overriding while set its value in loop in Vue JS and Firebase

I am getting data from firebase and overriding my roomName value in the loop. But outside the loop, it will not get the updated value.
Can someone please help me with the same?
export default {
name: "Chat",
components: {
ChatMessages
},
data(){
return{
rooms: [],
roomName: null,
}
},
mounted() {
this.getRooms();
},
methods: {
getRooms() {
roomsRef.orderByChild('name').once('value').then(snapshot => {
this.rooms = snapshot.val();
});
},
selectUser: function(userId) {
$.each(this.rooms,function(index,data){
if((data.sender_id == firebase.auth().currentUser.uid && data.receiver_id == userId ) || (data.sender_id == userId && data.receiver_id == firebase.auth().currentUser.uid )){
this.roomName = data.room_name;
}
});
if(this.roomName == null){
console.log("Null");
console.log(this.roomName);
}else{
console.log("Not Null");
console.log(this.roomName);
}
},
}
}
As pointed out by User 28 in the comment section, you need to use an arrow function:
$.each(this.rooms,(index,data) => {
if((data.sender_id == firebase.auth().currentUser.uid && data.receiver_id == userId ) || (data.sender_id == userId && data.receiver_id == firebase.auth().currentUser.uid )){
this.roomName = data.room_name;
}
});
Explanation. A "normal" function binds its own this. An arrow function inherits the this of the parent scope. Read more here: https://www.codementor.io/#dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc

Vue.js - Input, v-model and computed property

I'm using vue-2.4 and element-ui 1.4.1.
Situation
I have a basic input which is linked with v-model to a computed property. When blur I check if the value input is greater or lower than min and max and I do what I have to do ... Nothing fancy here.
Problem
The value displayed in the input does not always equal enteredValue
Steps to reproduce
1) Input 60 --> Value displayed is the max so 50 and enteredValue is 50 (which is ok)
2) Click outside
3) Input 80 --> Value displayed is 80 and enteredValue is 50
Questions
How can I fix that so the value displayed is always the same as the enteredValue ?
Here is the minimal code to reproduce what I'm facing JSFIDDLE
<div id="app">
The variable enteredValue is {{enteredValue}}
<el-input v-model="measurementValueDisplay" #blur="formatInput($event)"></el-input>
</div>
var Main = {
data() {
return {
enteredValue: '',
max: 50,
min: 10
}
},
computed: {
measurementValueDisplay: {
get: function () {
return this.enteredValue + ' inchs'
},
set: function (newValue) {
}
},
},
methods: {
formatInput($event) {
let inputValue = $event.currentTarget.value;
if (inputValue > this.max) { this.enteredValue = this.max}
else if (inputValue < this.min) { this.enteredValue = this.min}
else this.enteredValue = inputValue
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Reading this vuejs, will understand what happens
"computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed."
Changed some comportament of the code. Made run:
computed() method not works properly for update value in window. But if looks at console the value yes updated.
So, i remove computed (getter and setter), and put into data, without setter and getter( i dont like this in javascript).
var Main = {
data() {
return {
measurementValueDisplay:'fff',
enteredValue: '',
max: 50,
min: 10
}
},
computed: {
/*measurementValueDisplay: {
get: function () {
console.log('Computed was triggered so I assume enteredValue changed',this.enteredValue);
return this.enteredValue + ' inchs'
},
set: function (newValue) {
console.log('setter de qye', this.enteredValue);
}
},*/
},
methods: {
formatInput($event) {
this.enteredValue = 0;
let inputValue = $event.currentTarget.value;
console.log(inputValue);
if (inputValue > this.max) { this.enteredValue = this.max}
else if (inputValue < this.min) { this.enteredValue = this.min}
else this.enteredValue = inputValue
this.measurementValueDisplay = this.enteredValue + ' inchs'
console.log(this.enteredValue, 'oioioioio0');
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Your problem is that the values used in the computed property was not updated with the validation capping at 50 (Was 50, is now updated to 50, no need to recalculate), therefore v-model did not update the input.
I've edited your jsfiddle to use two computed properties:
One with an accessor to validate the entered value, one which returns the value with " inch" appended.
Here is the interesting part:
computed: {
measurementValueDisplay: {
get: function () {
return this.enteredValue
},
set: function (newValue) {
this.enteredValue = 0;
let inputValue = parseInt(newValue);
if(Number.isNaN(inputValue)){this.enteredValue = this.min}
else if (inputValue > this.max) { this.enteredValue = this.max}
else if (inputValue < this.min) { this.enteredValue = this.min}
else this.enteredValue = inputValue
}
},
valueWithInch(){
return this.enteredValue + " inch";
}
},
In case anybody still needs a hack for this one, you can use a value that will always change ( for example a timestamp )
var Main = {
data() {
return {
enteredValue: '',
max: 50,
min: 10,
now: 1 //line added
}
},
computed: {
measurementValueDisplay: {
get: function () {
return (this.now - this.now + 1 ) * this.enteredValue + ' inchs'; //line changed
},
set: function (newValue) {
this.now = Date.now(); //line added
}
},
},
methods: {
formatInput($event) {
let inputValue = $event.currentTarget.value;
if (inputValue > this.max) { this.enteredValue = this.max}
else if (inputValue < this.min) { this.enteredValue = this.min}
else this.enteredValue = inputValue
}
}
}