How can i use a condition to change the value of these props? In the component i want to set the props value to another one if none are passed. For example, if no title are passed i want to set that to some static string instead. How would i do that?
Component:
<template>
<vue-headful
:title="this.title"
:description="this.description"
:url="this.url"
:image="this.image"
/>
</template>
<script>
import vueHeadful from "vue-headful";
export default {
name: "Meta",
components: { vueHeadful },
props: {
title: String,
description: String,
url: String,
image: String
}
};
Here's how im using it in another file:
<Meta title="test" />
You can set a default value into each prop:
export default {
name: "Meta",
components: { vueHeadful },
props: {
title: {
type: String,
default: ''
},
description: {
type: String,
default: 'foo'
},
url: {
type: String,
default: 'www.example.com'
},
image: {
type: String,
default: '/some/path'
}
}
};
You have a lot of interesting settigs for props in the docs: https://vuejs.org/guide/components/props.html#prop-validation
You can use computed properties:
https://vuejs.org/guide/essentials/computed.html
you can set a default value for title like this:
{
title: {
type: String,
default: 'YOUR DEFAULT TITLE GOES HERE'
}
}
Related
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>
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 know I can give any prop its expected type and default value like this:
export default {
name: "myComponent",
props: {
myProp: { type: String, default: 'any text' }
}
}
And I so in documentation I can give 2 types as array like this:
export default {
name: "myComponent",
props: {
myProp: [String, Array]
}
}
BUT I would expect I can also give any of these types a default value also (this is not working): Is it possible?
export default {
name: "myComponent",
props: {
myProp: **[{type: String, default: ''}, {type: Array, default: []} ]**
}
}
I think it's impossible, for example if you have
export default {
name: "myComponent",
props: {
myProp: [
{type: String, default: ''},
{type: Array, default: []}
]
}
}
then when you write your component without passing myProp:
<my-component />
Then my-component doesn't know it should take value from default String or default Array definition.
How can i pass the value entered into Name and Adres input to the Parent vue?
Parent (App.vue):
<form-group-input-text
:label="'test'"
:labelvalue="'Name'"
:inputplaceholder="'Name'"
:inputname="'Name'"
:inputvalue="''"
:inputclassname="''"
:inputid="'Name'"
:validation="'required|min:3|max:5'">
</form-group-input-text>
<form-group-input-text
:label="'testt'"
:labelvalue="'Adres'"
:inputplaceholder="'adres'"
:inputname="'adres'"
:inputvalue="''"
:inputclassname="''"
:inputid="'adres'"
:validation="'required'">
</form-group-input-text>
Child:
<form-label
:label="inputid"
:labelvalue="labelvalue">
</form-label>
<form-error :inputname="inputname"></form-error>
<form-input-text
v-on:input="handleTitle"
:validation="validation"
:inputplaceholder="inputplaceholder"
:inputname="inputname"
:inputvalue="inputvalue"
:inputclassname="inputclassname"
:inputid="inputid">
</form-input-text>
import Error from '../../form/validation/Error.vue'
import Label from '../../form/Label.vue'
import Input from '../../form/InputText.vue'
export default {
data: function () {
return {
inputvalue: ''
}
},
components: {
'form-label': Label,
'form-input-text': Input,
'form-error': Error
},
props: {
label: String,
labelvalue: String,
inputplaceholder: String,
inputname: String,
inputclassname: String,
inputid: String,
validation: String
},
methods: {
handleTitle: function (evt) {
this.inputvalue = evt.target.value
},
}
}
Child from child:
<input type="text"
v-on:input="updateValue($event)"
v-validate="validation"
:placeholder="inputplaceholder"
:name="inputname"
:value="inputvalue"
:class="{
'form-control':'form-control',
'alert alert-danger': errors.has(inputname),
'alert alert-success': $validator.fields.find({ name: inputname })
&& $validator.fields.find({ name: inputname }).flags.dirty
&& !errors.has(inputname)
}"
:id="inputid"
>
<script>
export default {
inject: ['$validator'],
props: {
inputplaceholder: String,
inputname: String,
inputvalue: String,
inputclassname: String,
inputid: String,
validation: String
},
methods: {
updateValue: function (evt) {
this.$emit('input', evt)
}
}
}
</script>
The common way is to use emit() to dispatch an event to the parent component.
https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event
You can use it with v-model, too https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components
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>