Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I created a project with npm and vuejs/vue-cli.
I have eslint entries in my package.json file.
I got a warning when running my code :
WARNING Compiled with 1 warnings
5:57:37 AM
✘ http://eslint.org/docs/rules/space-before-function-paren Missing
space before function parentheses src/components/HomePage.vue:142:9
show() {
^
✘ 1 problem (1 error, 0 warnings)
what should i do with the space in this line?
export default {
el: '#skills',
props: {
skill: Object,
selectedId: Number
},
computed: {
show() { //in this line
return this.skill.id === this.selectedId
}
},
...
}
You may either add the space before the paren or (preferred option) update your .eslintrc.js file to represent your style preferences.
I recommend you add this rule in .eslintrc.js:
rules: {
'space-before-function-paren': ['error', {
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}]
}
The Docs:
https://eslint.org/docs/rules/space-before-function-paren#require-or-disallow-a-space-before-function-parenthesis-space-before-function-paren
As the error states, you're missing a space after your function name and before your parenthesis:
Missing space before function parentheses
There is an ESLint rule in your code that states your function must be formatted like so:
myFunction () { ... }
You have your function formatted like so:
myFunction() { ... }
If you add a space between show and () it should resolve the issue. Here's the correct snippet:
export default {
el: '#skills',
props: {
skill: Object,
selectedId: Number
},
computed: {
show () { //in this line
return this.skill.id === this.selectedId
}
},
...
}
Try setting vetur.format.defaultFormatter.js to prettier-eslint.
If you're using TypeScript, you may need to set vetur.format.defaultFormatter.ts to prettier-tslint instead.
If we are using anonymous function then it is showing error. To solve this use arrow function.
Related
I'm working with Docusaurus to create a documentation site for 3 different education courses - all within the docs folder.
So I'm looking for a way to have the version be different across folders in there, or figure out what the best strategy for this is.
Right now, in my docusaurus.config.js I have:
module.exports = {
presets: [
'#docusaurus/preset-classic',
docs: {
lastVersion: 'current',
versions: {
current: {
label: '1.0.0',
path: '1.0.0',
},
},
},
],
};
But I'm not sure how to keep track of 3 different versions across 3 different docs all within the same site.
Swizzle the navbar via wrapping
yarn run swizzle #docusaurus/theme-classic NavbarItem/DocsVersionDropdownNavbarItem -- --wrap
Modify the swizzled component like so:
src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js:
import React from "react";
import DocsVersionDropdownNavbarItem from '#theme-original/NavbarItem/DocsVersionDropdownNavbarItem';
import { useLocation } from '#docusaurus/router';
export default function DocsVersionDropdownNavbarItemWrapper(props) {
const { docsPluginId, className, type } = props
const { pathname } = useLocation()
/* (Custom) check if docsPluginId contains pathname
Given that the docsPluginId is 'charge-controller' and the routeBasePath is 'charge-controller', we can check against the current URI (pathname).
If the pathname contains the docsPluginId, we want to show the version dropdown. Otherwise, we don't want to show it.
This gives us one, global, context-aware version dropdown that works with multi-instance setups.
You want to declare a version dropdown for each plugin in your navbarItems config property for this to work well.
const doesPathnameContainDocsPluginId = pathname.includes(docsPluginId)
if (!doesPathnameContainDocsPluginId) {
return null
}
return <DocsVersionDropdownNavbarItem {...props} />;
}
For this to work, you need to have your documentation (based on products) split up using multi-instances: (https://docusaurus.io/docs/docs-multi-instance#docs-navbar-items)
Note that the preset docsPlugin ID always is "default".
You can try to use
import {
useActivePluginAndVersion,
} from '#docusaurus/plugin-content-docs/client';
const version = activePluginAndVersion.activeVersion.name; // use label instead of name if issues arise.
instead to get the current docsPluginId, name or label.
This would be the more "robust" solution I think. That said, we do use the solution I provided above as-is and it works fine for now.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Let's say you have a store like this. And a component where you select a car from the list which gets passed as a prop to another component where you can edit various properties of the car object.
If the car objects had more properties like brand, weight etc. I would have to either:
Create a new mutation for every property This has the downside of causing a huge amount of mutations, which will make the store file very unreadable in my opinion.
Create a generic mutation that takes an object, a field, and a value and assign that. This has the benefit of only having one generic mutation. But it has the downside that it can't handle nested objects.
Create a new car object in the component and replace that in the state by id field. This feels like a clean solution but it would involve copying the object to remove mutability, and that feels less clean. And also slow down the app if use a lot I guess.
In my projects, I've ended up with a mix of these options which just feels chaotic.
So, my question is if there's a better pattern to use than any of these? And if not, which is considered the best practice. I've searched for an answer to this for a long time but never found any good explanation.
state: {
cars: [
{id: 1, color: "blue"},
{id: 2, color: "blue"},
{id: 3, color: "blue"},
]
},
mutations: {
setColor(state, {car, color}){
car.color = color;
}
},
getters: {
allCars(state){
return state.cars;
}
},
I would do it using deepMerge function:
export const mutations = {
setCarProperties(state, car) {
const index = state.cars.findIndex((item) => item.id === car.id);
Vue.set(state.cars, index, deepMerge(state.cars[index], car));
}
};
So you can change and add properties (even nested):
updateCarType() {
const car = {
id: 2,
type: {
engine: "electric",
},
};
this.$store.commit("setCarProperties", car);
},
Please note I am using Vue.set in mutation. You may wonder why I don't change state like usually we do:
state.cars[index] = deepMerge(state.cars[index], car));
But that won't be reactive, so Vue.set is needed. https://v2.vuejs.org/v2/api/#Vue-set
Check demo:
https://codesandbox.io/s/questions-69864025-vuex-update-property-of-object-in-array-causes-many-mutation-methods-sq09z?file=/pages/index.vue
I will share my views on this subject. Sincerely I don't know the best practice, and there are a handful of variations of the same approach.
Basically, it applies only the second principle you mentioned, and keeps the reactivity in place for the whole update cycle.
In the store make a generic mutation:
mutations: {
setItem(state, item) {
let idx = state.items.findIndex((i) => i.id === item.id);
Vue.set(state.items, idx, item);
}
}
In component map the state items to a computed property, and make another one for the edited item:
computed: {
...mapGetters({ allItems: "allItems" }),
localItem: {
get() {
return this.allItems[0];
},
set(val) {
this.setItem(val);
},
},
},
methods: {
...mapMutations(["setItem"])
}
And the tricky part, update the local item:
methods: {
...mapMutations(["setItem"]),
changeItem() {
this.$set(this, "localItem", { ...this.localItem, color: "red" });
},
}
Do not update directly object properties but rather assign the whole object, so that the computed setter is triggered and changes are committed to store, without any warnings.
Codesandbox
Basically I have exact same issue as here but no one answer that question.
I have following code for title in my index component:
export default {
head: {
title: function () {
return {
inner: this.$options.filters.translate('yacht charter'),
separator: ' ',
id: 'indexTitle'
}
},
I'm also using prerender-spa-plugin. Title at first is once (when I use show code ctrl+U) but when javascript loads and execute, it double title.
This happen only to prerendered app.
I'm doing something wrong?
I think I fixed it with changing 7th line in vue-head.js in node_modules directory from:
complement: window.document.title,
to
complement: '',
I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.
I'm noticing a strange behaviour with RequireJS trying to assign a simple module value directly to a variable, like this:
App.tables = require(['appTables']);
The result of this call is that App.tables contain this function:
localRequire(deps, callback, errback)
while my appTables.js looks like this:
define({
users: {
name: 'tables.users',
data: {
name: {
visible: true,
hide: false,
display: 'Name'
},
surname: {
visible: true,
hide: false,
display: 'Surname'
}
}
}
});
Indeed trying to assign it in the classic way works:
require(['appTables'], function(appTables) {
App.tables = appTables;
});
So what's wrong with my first approach? Why does it return a function instead of the object? Thanks!
The simplified CommonJS format which you're using (App.tables = require('appTables')) is meant to be used within a module, as an alternative to the amd format where you assign an array of module dependencies to function arguments. It is not meant to be used in your main.js module (just use the standard require('appTables', function(appTables) { ... }); format for that).
In a module, you would wrap the require call in a define block, and pass the module name ('appTables'):
define(function(require) {
appTables = require('appTables');
... do something with appTables ...
});
See the documentation on the Simplified CommonJS Wrapper for details.
See also: Why use alternate requirejs define: define(function(require) { ... }