NO LONGER MAINTAINED: Please migrate to http://chat.vuejs.org/ for the new and improved community chat
schum hey i'm running into a strange issue when running unit tests. "[Vue warn]: Invalid handler for event "user-clear": got undefined" I'm using the @vue/composition-api and the handler for that event is a function defined and returned in the setup method. i don't get that error if i move the logic to the methods group
schum * hey i'm running into a strange issue when running unit tests. "[Vue warn]: Invalid handler for event "user-clear": got undefined" I'm using the @vue/composition-api and the handler for that event is a function defined and returned in the setup method. i don't get that error if i move the logic to the methods group
Property or method "field" is not defined on the instance but referenced during render
<component
v-bind:is="checkbox-field"
:field="{ name: 'legal', label: 'Agree', validators: ['true'] }"
:formstate="formstate"
:model="model"
/><template>
<validate :state="formstate" class="form-group col-md-12" :custom="validators" v-if="relevant()">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
:class="className"
:name="field.name"
v-model="model[field.name]"
/>
<label class="form-check-label" :for="field.name">{{ field.label }}</label>
</div>
</validate>
</template>
Suggestion of 10 (TEN) crucial items for developing web application 2020
Could someone suggest the best tool/framework for small or medium size or enterprise web application for 2020 - 10 to 1000 users and millions of records
#1 - Best Unit test case framework
#2 - Best NoSQL Database
#3 - Best Relation Database
#4 - Best Synchronous Framework
#5 - Best Asychronous Framework
#6 - Best Front-End Framework (Active Development, Max Support)
#7 - Best Debugging Tool
#8 - Best Performance Tuning Tool
#9 - Best Code Coverage Tool
#10 - Best DB migration tool (ex: flyway)
Thanks.
SERP!C0 prog20901 (Gitter): there is no "best" tool. Each tool is a better solution for a specific problem. With that, your viewing angle should be defining the scope of the problem to solve thn laying down the solution and best fitting tools.If I may use a layman analogy, your questions sounds like: what's the best hammer, best nail, best brush, best paint, best cement, best screw, best screwdriver, etc.
I can help you better if you clarify why you're asking those questions 😇
<button type="button" @click="updateExpense" class="btn btn-primary float-right">Update</button>
methods:{ updateExpense(){ // I want my button "Update" to show Spinner and Loading.... } }
I need to convert this code from a mixins written in javascript to typescript, but when making the changes I get an error, which is clear because I am assigning heading values. How could I transform my code to typescript correctly.
warn]: Avoid mutating an injected value directly since the changes will be overwritten whenever the provided component re-renders. injection being mutated: "heading"
This is the original mixin (javascript)
export default {
name: 'Heading',
inject: {
heading: {
default: () => ({ align: 'left' }),
},
},
provide () {
return {
heading: {
align: this.align,
},
}
},
props: {
align: {
type: String,
default () {
return this.heading.align
},
},
},
computed: {
justify () {
switch (this.align) {
case 'center': return 'center'
case 'right': return 'end'
default: return 'start'
}
},
},
}
and this is my version in typescript
import {Component, Prop, Inject, Provide, Vue} from 'vue-property-decorator';
@Component
export default class Heading extends Vue {
@Inject({default: () => ({align: 'left'})}) heading!: any;
@Prop({type: String, default() {return this.heading.align}}) public align: string;
// @ts-ignore
@Provide() heading = {align: this.align} // error in the same identifier so use @ts-ignore
public get justify() {
switch (this.align) {
case 'center':
return 'center'
case 'right':
return 'end'
default:
return 'start'
}
}
}
My code works but the errors in the browser console continue. Any ideas how I can convert that mixin to typescript without throwing errors at the browser console.
The mixin is used in several other components through the app. I hope you can help me
You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
at Collection.get (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\node_modules\jscodeshift\src\Collection.js:213:13)
at injectOptions (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\lib\util\codemods\injectOptions.js:15:6)
at newTransform (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\node_modules\vue-jscodeshift-adapter\src\jscodeshift-mode.js:9:14)
at runCodemod (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\lib\util\runCodemod.js:29:26)
at Object.keys.forEach.file (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\lib\Generator.js:290:23)
at Array.forEach (<anonymous>)
at Generator.resolveFiles (C:\Users\Chen\AppData\Roaming\nvm\v10.18.0\node_modules\@vue\cli\lib\Generator.js:276:24)
at process._tickCallback (internal/process/next_tick.js:68:7)
@import "vue-select/src/scss/vue-select.scss"; ?
hey guys, I have a little problem, I'm posting an HTTP request, then updating the vuex store, then trying to clear all the form fields and the instance variables of the component, somehow my app is clearing the fields before updating the store, and then when it updates the store with empty values, any ideas what is the problem?
this is the code:
axios({
url: "/boards",
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: formData
}).then(() => {
this.$store.commit("addBoard", this.boardDetails)
this.resetValues() //clearing the values
});this is the mutation in store:
addBoard: (state, payload) => state.boards.push(payload)
export default {
name: 'Heading',
inject: {
heading: {
default: () => ({ align: 'left' }),
},
},
provide () {
return {
heading: {
align: this.align,
},
}
},
props: {
align: {
type: String,
default () {
return this.heading.align
},
},
},
computed: {
justify () {
switch (this.align) {
case 'center': return 'center'
case 'right': return 'end'
default: return 'start'
}
},
},
}
and this is my version in typescript
import {Component, Prop, Inject, Provide, Vue} from 'vue-property-decorator';
@Component
export default class Heading extends Vue {
@Inject({default: () => ({align: 'left'})}) heading!: any;
@Prop({type: String, default() {return this.heading.align}}) public align: string;
// @ts-ignore
@Provide() heading = {align: this.align} // error in the same identifier so use @ts-ignore
public get justify() {
switch (this.align) {
case 'center':
return 'center'
case 'right':
return 'end'
default:
return 'start'
}
}
}