I'm rendering a dynamic component:
<component :is="element.name == 'text' ? element.component : false" v-bind="elementProps"></component>
with:
computed: {
element() {
return {
name: this.elementObject.type,
component: {
components: { TextInput },
template: `<text-input :form-id="formId"
:section-id="sectionId"
:element-id="elementId"
id="test2"
></text-input>`
},
}
},
elementProps() {
const props = {
formId: this.formId,
sectionId: this.sectionId,
elementId: this.elementId,
id: this.generateId()
};
return props;
},
}
.. but I get an error Property or method "formId" is not defined on the instance but referenced during render. although I am passing in the props. What am I doing wrong?
You forgot to define the props when you create the component in the element function, try:
component: {
components: { TextInput },
template: `<text-input :form-id="formId"
:section-id="sectionId"
:element-id="elementId"
id="test2"></text-input>`,
props: ['formId', 'sectionId', 'elementId', 'id']
},
formId, sectionId and elementId in the template have to be defined somewhere in the component either as props, data or computed property.
Related
Well, I have two components. From one component I would like to send a string to another component where the string should be displayed on the console. This is the component where the data is pushed to the other component:
this.$router.push({path: "/editService", params:{data: 'test'}})
This is the second component. In here the string should be displayed:
export default {
data(){
return{
ServiceData: []
}
},
created() {
this.ServiceData=this.$route.params.data
console.log(this.ServiceData)
}
}
If you are using Vue Router, then you should have a route defined similar to
{
path: '/editService/:routeData',
component: User,
props: true
}
then add a prop to your user component:
export default {
data(){
return{
ServiceData: this.routeData
}
},
props: {
routeData: {
type: String, // at least for test
required: true
}
},
created() {
console.log(this.ServiceData)
}
}
When I pass in name as a prop, it works as expected and sets the nameData data field so that I can change it within the component.
Parent
<child name="charles"></child>
Child
data() {
return {
nameData: this.name
}
},
props: {
name: {type: String, default: "NONE"}
}
When I bind the prop like below, the nameData data field is set to the default prop, which is "None". Why is that?
Parent
data() {
return {
firstName: "Charles"
}
}
<child :name="firstName"></child>
Child
data() {
return {
nameData: this.name
}
},
props: {
name: {type: String, default: "NONE"}
}
See my example
First child component works as expected (your code)
Second displays "NONE" because it's data is initialized with prop value, which is undefined at the time the (child's) data() is executed. Any change to the prop in the future (in mounted in my example) wont affect child's data...
const child = Vue.component('child', {
data() {
return {
nameData: this.name
}
},
props: {
name: {
type: String,
default: "NONE"
}
},
template: `<div> {{ nameData }} </div>`
})
const vm = new Vue({
el: "#app",
components: {
child
},
data() {
return {
firstName: "Charles",
secondName: undefined
}
},
mounted() {
this.secondName = "Fred"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child :name="firstName"></child>
<child :name="secondName"></child>
</div>
name="charles" - you passed down the string "charles";
:name="firstName" - you passed down a variable "firstName" which seems to be undefined in the parent component at the time of child rendering and the prop in the child component gets the default value you provided it with.
UPD: I played a little with Michal's example. You can use computed instead of data() {} or directly a prop itself if you don't need any data transformation. Because it seems that you assign parent's firstName value in async mode or just later.
const child = Vue.component('child', {
computed: {
nameData() {
return this.name;
}
},
props: {
name: {
type: String,
default: "NONE"
}
},
template: `<div> {{ nameData }} </div>`
})
const vm = new Vue({
el: "#app",
components: {
child
},
data() {
return {
firstName: "Charles",
secondName: undefined
}
},
mounted() {
this.secondName = "Fred"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
<child :name="firstName"></child>
<child :name="secondName"></child>
</div>
I have a vue chartjs component which imports the whole vue-chartjs library. My idea is, is it possible to somehow pass the type of the chart which I want and add it to the 'extends: VueCharts.charttype?.' In the example I provide it extends the VueCharts.Line, I need this property to be dynamically interpolated, passed from props. Is it possible this charttype to come from a parent props dynamically and how?
<script>
import { VueCharts } from "vue-chartjs";
export default {
extends: VueCharts.Line,
props: ["chartdata", "options"],
mounted() {
this.renderChart(this.chartdata, this.options);
}
}
</script>
<style scoped>
</style>
since extends the same as mixins, you need to pass a dynamic mixin, in order to do that you need two components, imagine we have component ChartWrapper :
<template>
<div>
<div>{{ chartType }}</div>
<chart :chart-data="datacollection"/>
</div>
</template>
<script>
import Chart from "./Chart";
import { VueCharts, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
name: "ChartWrapper",
components: {
Chart
},
props: {
chartType: {
type: String,
required: true
}
},
data() {
return {
datacollection: {
labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [this.getRandomInt(), this.getRandomInt()]
},
{
label: "Data One",
backgroundColor: "#f87979",
data: [this.getRandomInt(), this.getRandomInt()]
}
]
}
};
},
methods: {
getRandomInt() {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
}
},
created() {
if (this.chartType) {
Chart.mixins = [reactiveProp,VueCharts[this.chartType]];
}
}
};
</script>
this component takes chartType as a prop, and I import all charts as VueCharts in top of the script ==> 1
second component:
<script>
export default {
props: ["options"],
mounted() {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options);
}
};
</script>
the second component just has options props, and renderChart function invoked.
==> 2
What is happening?
the ChartWrapper component receives the chart type by chartType prop, in the created hook, if chartType exist, assign the chart(resolved by VueCharts[this.chartType]) to Chart component as a mixin in addition to reactiveProp,
I also pass the chart data to Chart component.
in the end, call the ChartWrapper component:
<ChartWrapper chartType="Bar"/>
Live example on code sandbox: https://codesandbox.io/s/vue-template-w9r8k
You can also choose for the option to just extend the Line chart and update the config of the chart with the chart type you want and give it an update so it changes type.
<script>
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Line,
name: "LineChart",
mixins: [reactiveProp],
props: {
options: { type: Object },
chartType: { type: String }
},
mounted () {
this.renderChart(this.chartData, this.options);
},
watch: {
options: {
deep: true,
handler () {
this.$data._chart.options = this.options;
this.updateChart();
}
},
chartType (newVal) {
this.$data._chart.config.type = newVal;
this.updateChart()
}
},
methods: {
updateChart () {
this.$data._chart.update();
},
}
}
</script>
What do I have: two components, parent and child.
Parent
<UserName :name=user.name></UserName>
...
components: {UserName},
data() {
return {
user: {
name: '',
...
}
}
},
created() {
this.fetchUser()
console.log(this.user) //<- object as it is expected
},
methods: {
fetchUser() {
let that = this
axios.get(//...)
.then(response => {
for (let key in response.data) {
that.user[key] = response.data[key]
}
})
console.log(that.user) //<- object as it is expected
}
}
Child
<h3 v-if="!editing" #click="edit">{{ usersName }}</h3>
<div v-if="editing">
<div>
<input type="text" v-model="usersName">
</div>
</div>
...
props: {
name: {
type: String,
default: ''
},
},
data() {
return {
editing: false,
usersName: this.name,
...
}
},
Problem: even when name prop is set at child, usersName data value is empty. I've inspected Vue debug extension - same problem.
What have I tried so far (nothing helped):
1) props: ['name']
2)
props: {
name: {
type: String
},
},
3) usersName: JSON.parse(JSON.stringify(this.name))
4) <UserName :name="this.user.name"></UserName>
P. S. when I pass static value from parent to child
<UserName :name="'just a string'"></UserName>
usersName is set correctly.
I've also tried to change name prop to some foobar. I guessed name might conflict with component name exactly. But it also didn't helped.
user.name is initially empty, and later gets a value from an axios call. usersName is initialized from the prop when it is created. The value it gets is the initial, empty value. When user.name changes, that doesn't affect the already-initialized data item in the child.
You might want to use the .sync modifier along with a settable computed, or you might want to put in a watch to propagate changes from the prop into the child. Which behavior you want is not clear.
Here's an example using .sync
new Vue({
el: '#app',
data: {
user: {
name: ''
}
},
methods: {
fetchUser() {
setTimeout(() => {
this.user.name = 'Slartibartfast'
}, 800);
}
},
created() {
this.fetchUser();
},
components: {
userName: {
template: '#user-name-template',
props: {
name: {
type: String,
default: ''
}
},
computed: {
usersName: {
get() { return this.name; },
set(value) { this.$emit('update:name', value); }
}
},
data() {
return {
editing: false
}
}
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
{{user.name}}
<user-name :name.sync=user.name></user-name>
</div>
<template id="user-name-template">
<div>
<input type="text" v-model="usersName">
</div>
</template>
should be passed like this...
<UserName :name="user.name"></UserName>
if data property is still not being set, in mounted hook you could set the name property.
mounted() {
this.usersName = this.name
}
if this doesn't work then your prop is not being passed correctly.
sidenote: I typically console.log within the mounted hook to test such things.
I currently have a component with this render function:
render(createElement, context) {
return createElement(
'div', {
'class': 'sliced'
},
[
createElement('div', {
'class' : 'sliced-inner',
'style' : context.style
}
)
]
)
},
and I've added functional: true. The "style" is a computed value, but it doesn't seem to get passed with the context object. Is there any way to access computed values in a Vue render function?
A functional component has no state, so a computed property is redundant. In the following example I'm creating a header component that toggles between foo and bar when clicked:
Vue.component('message', {
render (createElement) {
return createElement('h1', {
on: {
click: event => {
return this.foo = !this.foo
}
}
}, this.fooBar)
},
computed: {
fooBar() {
return (this.foo) ? 'foo' : 'bar'
}
},
data(){
return {
foo: true
}
}
});
As you can see the header value is based on a computed, and it works fine because it is not a functional component so can have state: https://jsfiddle.net/hwbbukvd/
If I make that a functional component by adding functional: true, then it does not work because it's display relies on the component having state: https://jsfiddle.net/cygjdjru/
See: https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components
In your case, if you aren't looking for style to be reactive, then I'm guessing you just want to pass a prop
Vue.component('message', {
functional: true,
render(createElement, context) {
return createElement('h1', context.props.foo)
},
props: {
foo: {
required: true
}
}
});
See: https://jsfiddle.net/qhzh0a2c/