I have two components
Parent: AjaxLoader.vue
<script>
export default {
name: 'AjaxLoader',
props: {
url: {},
},
render() {
return this.$scopedSlots.default({
result: `resultData of ${this.url}`,
});
},
};
</script>
Child: SearchInput.vue
<template>
<AjaxLoader url="/api/fetch/some/data">
<template slot-scope="{ result }">
<div>{{ result }}</div>
</template>
</AjaxLoader>
</template>
Now I can pass variable from parent to child and in child component can display parent result variable. In this case in result var should be resultData of /api/fetch/some/data.
My question is: How can I write this logic of child component into render function with JSX syntax ?
I tried:
<script type="text/jsx">
import AjaxLoader from './../ajax-loader/AjaxLoader.vue';
export default {
components: { AjaxLoader },
name: 'SearchInput',
render(h) {
return (
<AjaxLoader url="/api/fetch/some/data">
<template slot-scope="{ result }">
<div> {{ result }} </div>
</template>
</AjaxLoader>
);
},
};
</script>
But I got error: [Vue warn]: Error in render: "ReferenceError: result is not defined"
I already have installed plugins for JSX support of Vue.js
Thanks for help
I found solution for child component. Maybe it someone helps.
render(h) {
return (
<AjaxLoader url="/api/fetch/some/data">
{(props) => <div> {props.result} </div>}
</AjaxLoader>
);
},
Related
I try to use a prop in a computed value and i keep getting the error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
found in
---> at src/cmps/space-details/space-imgs.vue
at src/pages/space-details.vue
at src/App.vue
Maybe i'm using the prop wrong?
the component:
<template>
<div v-if="imgUrls.length" class="space-imgs" :class="pics">
<img :src="img" v-for="(img, idx) in imgUrls.slice(0, 5)" :key="idx" />
</div>
</template>
<script>
export default {
props: { imgUrls: Array },
computed: {
pics() {
return `pics-${this.imgUrls.length}`;
},
},
};
</script>
and this is how i pass the prop:
<space-imgs :imgUrls="space.imgUrls" />
Thanks
Pass the prop like below. This will work.
<space-imgs :img-urls="space.imgUrls" />
For avoiding wrong prop data in component. initialize prop with default value.
props: {
imgUrls: {
type: Array,
default: [],
required: true
}
}
Your template will be first rendered before the prop is passed, making imgUrls undefined. So just do this: v-if="imgUrls".
I have a question why not this component, not re-rendering after changing value so what I'm trying to do is a dynamic filter like amazon using the only checkboxes so let's see
I have 4 components [ App.vue, test-filter.vue, filtersInputs.vue, checkboxs.vue]
Here is code sandbox for my example please check the console you will see the value changing https://codesandbox.io/s/thirsty-varahamihira-nhgex?file=/src/test-filter/index.vue
the first component is App.vue;
<template>
<div id="app">
<h1>Filter</h1>
{{ test }}
<test-filter :filters="filters" :value="test"></test-filter>
</div>
</template>
<script>
import testFilter from "./test-filter";
import filters from "./filters";
export default {
name: "App",
components: {
testFilter,
},
data() {
return {
filters: filters,
test: {},
};
},
};
</script>
so App.vue that holds the filter component and the test value that I want to display and the filters data is dummy data that hold array of objects.
in my test-filter component, I loop throw the filters props and the filterInputs component output the input I want in this case the checkboxes.
test-filter.vue
<template>
<div class="test-filter">
<div
class="test-filter__filter-holder"
v-for="filter in filters"
:key="filter.id"
>
<p class="test-filter__title">
{{ filter.title }}
</p>
<filter-inputs
:value="value"
:filterType="filter.filter_type"
:options="filter.options"
#checkboxChanged="checkboxChanged"
></filter-inputs>
</div>
</div>
<template>
<script>
import filterInputs from "./filterInputs";
export default {
name: "test-filter",
components: {
filterInputs,
},
props:{
filters: {
type: Array,
default: () => [],
},
value: {
type: Array,
default: () => ({}),
},
},
methods:{
checkboxChanged(value){
// Check if there is a array in checkbox key if not asssign an new array.
if (!this.value.checkbox) {
this.value.checkbox = [];
}
this.value.checkbox.push(value)
}
};
</script>
so I need to understand why changing the props value also change to the parent component and in this case the App.vue and I tried to emit the value to the App.vue also the component didn't re-render but if I check the vue dev tool I see the value changed but not in the DOM in {{ test }}.
so I will not be boring you with more code the filterInputs.vue holds child component called checkboxes and from that, I emit the value of selected checkbox from the checkboxes.vue to the filterInputs.vue to the test-filter.vue and every component has the value as props and that it if you want to take a look the rest of components I will be glad if you Did.
filterInpust.vue
<template>
<div>
<check-box
v-if="filterType == checkboxName"
:options="options"
:value="value"
#checkboxChanged="checkboxChanged"
></check-box>
</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
default: () => ({}),
},
options: {
type: Array,
default: () => [],
},
methods: {
checkboxChanged(value) {
this.$emit("checkboxChanged", value);
},
},
}
</script>
checkboxes.vue
<template>
<div>
<div
v-for="checkbox in options"
:key="checkbox.id"
>
<input
type="checkbox"
:id="`id_${_uid}${checkbox.id}`"
#change="checkboxChange"
:value="checkbox"
/>
<label
:for="`id_${_uid}${checkbox.id}`"
>
{{ checkbox.title }}
</label>
</div>
</div>
<template>
<script>
export default {
props: {
value: {
type: Object,
default: () => ({}),
},
options: {
type: Array,
default: () => [],
},
}
methods: {
checkboxChange(event) {
this.$emit("checkboxChanged", event.target.value);
},
},
};
</script>
I found the solution As I said in the comments the problem was that I'm not using v-model in my checkbox input Vue is a really great framework the problem wasn't in the depth, I test the v-model in my checkbox input and I found it re-render the component after I select any checkbox so I search more and found this article and inside of it explained how we can implement v-model in the custom component so that was the solution to my problem and also I update my codeSandbox Example if you want to check it out.
Big Thaks to all who supported me to found the solution: sarkiroka, Jakub A Suplick
This is my App.vue where i have created the Data for todo list and trying to display all todo array data but nothing is showing i am stuck there and please help me to solve that problem
<template>
<div id="app">
<ToDo/>
</div>
</template>
<script>
import ToDo from './components/ToDo';
export default {
name: 'app',
components: {
ToDo
},
data ()
{
return {
todos: [
{
id: 1,
title: "TODO 1",
completed: false
},
{
id: 2,
title: "TODO 2",
completed: true
},
{
id: 3,
title:" TODO 3",
completed: false
}
]
}
}
}
</script>
This is my ToDo.vue from there i am trying to pass the todo.title to Display the title but not working
<template>
<div>
<div v-bind:key="todo.id" v-for="todo in todos" >
{{todo.title}}
</div>
</div>
</template>
<script>
export default {
name:"ToDo",
props: ["todos"]
}
</script>
You should be getting a warning in your console.
You are using a properties but not actually send it to the component.
Your template should be like this.
<template>
<div id="app">
<ToDo :todos="todos"/>
</div>
</template>
Since you're "todos" is an object you need to send it as Javascript which is the meaning of the : before the attribute.
Moreover you should definitely ensure that you are sending an Object to your component by specifying it in the definitions of your props.
props: {
todos: Object
}
you need to pass the todos into ToDo component from the app component like
<template>
<div id="app">
<ToDo :todos=todos/>
</div>
</template>
I am new in Vue.js. i don't know how can i render four message like this
hi
bye
go
back
my result is render go, back. i think my code is not render hello1.vue component.
i want render hello, hello1 components. how can i fix it?
hello.vue
<template>
<P> {{ hello.a }} </p>
<p> {{ hello.b }} </p>
</template>
<script>
export default {
data(){
return{
hello:{
a = "hi",
b = "bye"
}
},
props: ['hello1']
}
</script>
hello2.vue
<template>
<hello-vue :hello="hello1" />
</template>
<script>
import helloVue from './hello.vue'
export default {
data(){
return{
hello1:{
a = "go",
b = "back"
}
},
components:{
'hello-vue': helloVue
}
}
</script>
You are passing the data in a bit of a messy way. So first thing is we need to split this into a parent and child component. The child component will print out your two lines, while parent component will call and pass data.
Secondly in Hello.vue you have props AND data, the template is only accessing hello and not hello1 meaning the props variable isnt parsed.
Thirdly <template> may have only 1 child so that will cause rendering issues as well.
There are different ways, but let's try this
HelloItem.vue
<template>
<div>
<P> {{ hello.a }} </p>
<p> {{ hello.b }} </p>
</div>
</template>
<script>
export default {
data() {
return { }
},
props: ['hello']
}
</script>
And now we call this twice by passing in data
HelloView.vue
<template>
<div>
<hello-item :hello="hello1"/>
<hello-item :hello="hello2"/>
</div>
</template>
<script>
import HelloItem from './HelloItem.vue'
export default {
data() {
return {
hello1:{
a: "hi",
b: "bye"
},
hello2:{
a: "go",
b: "back"
},
}
},
components:{
'hello-item': HelloItem
}
}
</script>
Let me know if this answers your question.
main component:
<template>
<spelling-quiz v-bind:quiz="quiz"></spelling-quiz>
</template>
<script>
var quiz = {
text: "blah:,
questions: ['blah blah']
}
import spellingQuiz1 from './spellingQuiz1.vue';
export default {
components: {
spellingQuiz: spellingQuiz1
},
data: function(){
return{
quiz: quiz
}
}
};
</script>
spelling-quiz component - HTML
<template>
<div>
<br>
<div v-for="(question, index) in quiz.questions">
<b-card v-bind:header="question.text"
v-show="index === qIndex"
class="text-center">
<b-form-group>
<b-form-radio-group
buttons
stacked
button-variant="outline-primary"
size="lg"
v-model="userResponses[index]"
:options="question.options" />
</b-form-group>
<button v-if="qIndex > 0" v-on:click="prev">
prev
</button>
<button v-on:click="next">
next
</button>
</b-card>
</div>
<b-card v-show="qIndex === quiz.questions.length"
class="text-center" header="Quiz finished">
<p>
Total score: {{ score() }} / {{ quiz.questions.length }}
</p>
</b-card>
</div>
</template>
spelling-quiz component - JS
<script>
export default{
props:{
quiz: {
type: Object,
required: true
},
data: function(){
return{
qIndex: 0,
userResponses: Array(quiz.questions.length).fill(false)
};
},
methods:{
next(){
this.qIndex++;
},
prev(){
this.qIndex--;
},
score(){
return this.userResponses.filter(function(val){return val == 'correct'}).length;
}
}
}
};
</script>
I am getting the following error:
[Vue warn]: Property or method "qIndex" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I am also getting the same error for "userReponses".
I do not understand the error, and I have some research but the examples do not really apply to my issue.
Question:
Why is my data not accessible? If I refer to just this component it works, but as a child component it throws this error. I am not sure how I can fix it.
You have a missing } after the props. Currently your data attribute live in your props attribute. data should live on the root object. Should be structured like this:
export default {
name: "HelloWord",
props: {
quiz: {
type: Object,
required: true
}
},
data: function() {
return {
test: 100
};
},
methods: {
next() {},
prev() {},
score() {}
}
};