Until now I was using a computed property with a v-if in my component to avoid it to render if basic props was not given, for example :
<template>
<div v-if="basicPropsProvided">
Blabla
</div>
</template>
<script>
export default{
props: {
icon: { type: String, required: true },
title: { type: String, required: true },
url: { type: String, required: true }
},
computed: {
basicPropsProvided(): boolean {
return !!this.title && !!this.icon && !!this.url
}
}
}
</script>
I tried to move this logic to the setup method, without success. Do you think there is a way to do this with the composition api to reuse the logic on other components ?
Define a composable function called useCheckProvidedProps which takes props as parameter and returns the computed property :
<template>
<div v-if="basicPropsProvided">
Blabla
</div>
</template>
<script>
import {computed} from 'vue'
function useCheckProvidedProps (props){
return {
basicPropsProvided:computed(()=>!!props.title && !!props.icon && !!props.url)
}
}
export default{
props: {
icon: { type: String, required: true },
title: { type: String, required: true },
url: { type: String, required: true }
},
setup(props){
const {basicPropsProvided}=useCheckProvidedProps (props)
return {basicPropsProvided}
}
}
</script>
Related
I am trying to check if the Multi-select component is empty. But upon checking it kept telling me it's not null. Do I need to use a v-model for this?
Here's the code for the Multi-select component:
<template>
<div>
<Multiselect
v-model="value"
mode="tags"
:close-on-select="false"
:searchable="false"
:create-option="true"
:options="multi_options"
class="multiselect-orange multiselect"
/>
</div>
</template>
<script>
import Multiselect from "#vueform/multiselect";
export default {
components: {
Multiselect,
},
props: {
multi_options: {
type: Array,
required: true,
},
inputSelected:{
required:true,
},
method: { type: Function },
// default: {
// type: String,
// required: false,
// default: null,
// },
},
data() {
return {
value: this.inputSelected,
};
},
mounted() {
this.$emit("set-input", this.value);
},
watch: {
value: function () {
this.$emit("set-input", this.value);
},
},
};
</script>
Here's the code where I used the component:
<div class="inputHolder">
<label class="body"> Skills:</label>
<MultiSelect :multi_options="this.skills" #set-input="setSkillSet" :inputSelected="staffSkills"/>
</div>
Here's the code when I tried to check if the Multi-select is empty:
checkForm(){
this.errors = []
if (this.staffSkills) {
return true;
}
if(this.staffSkills === []){
this.errors.push('Select at least one.');
}
if(this.errors.length){
return this.errors
}
}
},
just trying out creating components with the render function, but I am getting a weird warning:
Following component:
import Vue, { CreateElement, VNode } from 'vue'
export default Vue.extend({
name: 'p-form-input',
props: {
type: String,
name: String,
value: {
type: [ String, Number ]
},
placeholder: String,
disabled: Boolean
},
data() {
return {
localValue: ''
}
},
watch: {
value(value) {
this.localValue = value
}
},
mounted() {
this.localValue = this.$props.value
},
methods: {
onInput(e: any) {
this.localValue = e.target.value
this.$emit('input', this.localValue)
},
onChange(e: any) {
this.localValue = e.target.value
this.$emit('change', this.localValue)
}
},
render(h: CreateElement): VNode {
return h('input', {
class: 'form-control',
domProps: {
disabled: this.$props.disabled,
type: this.$props.type,
name: this.$props.name,
placeholder: this.$props.placeholder,
value: this.localValue
},
on: {
input: this.onInput,
change: this.onChange
}
})
}
})
A v-model="inputValue" on the component does trigger a input/change on inputValue but im getting the warning?
Using vue 2.6.11!
Edit:
Don't mind the ts-ignore, it complains about no types found for it, so that's more cosmetic!!!
<template>
<div id="app">
<p-form-input type="text" name="some_input" v-model="inputValue" /> {{ inputValue }}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
// #ts-ignore
import PFormInput from 'vue-components/esm/components/form-input'
export default Vue.extend({
name: 'App',
components: {
PFormInput,
},
data() {
return {
inputValue: 'fdsdsfdsf'
}
}
});
</script>
You have a prop named "value' and then you are using a variable named "value" in your method:
onInput(e: any) {
const value = e.target.value
this.localValue = value
this.$emit('input', value)
},
Don't reuse the name "value". In fact, you don't even need that variable:
onInput(e: any) {
this.localValue = e.target.value
this.$emit('input', this.localValue)
},
Same thing for onChange:
onChange(e: any) {
this.localValue = e.target.value
this.$emit('change', this.localValue)
}
I have a Vue application that leverages Vuetify. In this application I have a component called city-selector.vue which is setup like this:
<template>
<select-comp
:id="id"
:items="cityList"
:item-text="name"
:item-value="cityCode"
#input="onInput">
</select-comp>
</template>
<script>
import VSelect from '../vuetify/VSelect';
export default {
name: 'city-select-comp',
extends: VSelect,
props: {
id: {
type: String,
default: '',
},
cityList: {
type: Array,
default: () => { return [] }
},
},
methods: {
onInput() {
//Nothing special, just $emit'ing the event to the parent
},
},
}
</script>
Everything with this component works fine except that when I open my dev tools I get a bunch of console errors all saying this (or something similar to this):
Cannot read property '$refs' of undefined
How can I fix this sea of red?
This is due to a bad import that you do not need. Remove the import VSelect and the extends statements and your console errors will disappear, like this:
<script>
export default {
name: 'city-select-comp',
props: {
id: {
type: String,
default: '',
},
cityList: {
type: Array,
default: () => { return [] }
},
},
methods: {
onInput() {
//Nothing special, just $emit'ing the event to the parent
},
},
}
</script>
I'm trying to figure out which approach is more appropriate / less resource intense. Both examples below will do the same job, but my understanding is that there might be situations where both events #keyup and #change might be triggered unnecessarily - hence my question, whether watch method would be a better option here?
The reason why I also need to check for a #change event is when someone simply selects saved input value rather than type it.
<template>
<input
type="text"
:name="name"
#keyup="update()"
#change="update()"
v-model="field"
>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
},
initialValue: {
type: String,
required: false,
default: ''
}
},
data() {
return {
field: this.initialValue
}
},
mounted() {
this.update();
},
methods: {
update() {
this.$emit('input', this.field);
}
}
}
</script>
vs
<template>
<input
type="text"
:name="name"
v-model="field"
>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
},
initialValue: {
type: String,
required: false,
default: ''
}
},
data() {
return {
field: this.initialValue
}
},
mounted() {
this.update();
},
watch: {
field() {
this.update();
}
},
methods: {
update() {
this.$emit('input', this.field);
}
}
}
</script>
I'm trying to make use of the main component inside another with pre-defined properties.
Here's what I'm trying to achieve, but I'm just getting an empty div as a result.
<template>
<call-dialog-link
:id="id"
:url=url"
message="Are you sure you wish to remove this record?"
label="Remove"
css-classes="alert"
></call-dialog-link>
</template>
<script>
import CallDialogLink from './CallDialogLink.vue';
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
}
},
components: {
'call-dialog-link': CallDialogLink
}
};
</script>
Here's the CallDialogLink component
<template>
<span class="clickAble" :class="cssClasses" v-text="label" #click="clicked()"></span>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
message: {
type: String,
required: true
},
label: {
type: String,
required: true
},
cssClasses: {
type: String,
required: false
}
},
mounted() {
window.EventHandler.listen('remove-dialog-' + this.id + '-called', (data) => {
window.location.reload(true);
});
},
methods: {
clicked() {
window.EventHandler.fire('top-confirm', {
id: 'remove-dialog-' + this.id,
message: this.message,
url: this.url
});
}
}
};
</script>
Any idea what I'm doing wrong?
I believe there is typo in your code.
<template>
<call-dialog-link
:id="id"
:url="url" // didn't open the double quote here
message="Are you sure you wish to remove this record?"
label="Remove"
css-classes="alert"
></call-dialog-link>
</template>