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.
Related
//inputtwo.vue
<template>
<div><input type="checkbox" v-model="checked" />one</div>
</template>
<script>
export default {
name: "inputtwo",
components: {},
data() {
return {};
},
};
</script>
//maincontent.vue
<template>
<div>
<div class="container" id="app-container" v-if="!checked">
<p>Text is visible</p>
</div>
<common />
</div>
</template>
<script>
export default {
name: "maincontent",
components: {},
data() {
return {
checked: false,
};
},
methods: {
hidecont() {
this.checked = !this.checked;
},
},
};
</script>
//inputone.vue
<template>
<div><input type="checkbox" v-model="checked" />one</div>
</template>
<script>
export default {
name: "inputone",
components: {},
data() {
return {};
},
};
</script>
How to hide content of checkbox from different components in Vuejs
I have three components called inputone(contains checkbox with v-model),inputtwo (contains checkbox with v-model),maincontent.(having some content and logic), So when user click on checkboxes from either one checckbox(one,two). i schould hide the content.
Codesanfdbox link https://codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/maincontent/maincontent.vue
reference code:- https://codepen.io/dhanunjayt/pen/mdBeVMK
You are actually not syncing the data between components. The main content checked never changes. You have to communicate data between parent and child components or this won't work. And try using reusable components like instead of creating inputone and inputtwo for same checkbox create a generic checkbox component and pass props to it. It is a good practice and keeps the codebase more manageable in the longer run.
App.vue
<template>
<div id="app">
<maincontent :showContent="showContent" />
<inputcheckbox text="one" v-model="checkedOne" />
<inputcheckbox text="two" v-model="checkedTwo" />
</div>
</template>
<script>
import maincontent from "./components/maincontent/maincontent.vue";
import inputcheckbox from "./components/a/inputcheckbox.vue";
export default {
name: "App",
components: {
maincontent,
inputcheckbox,
},
computed: {
showContent() {
return !(this.checkedOne || this.checkedTwo);
},
},
data() {
return {
checkedOne: false,
checkedTwo: false,
};
},
};
</script>
checkbox component:
<template>
<div>
<input
type="checkbox"
:checked="value"
#change="$emit('input', $event.target.checked)"
/>
{{ text }}
</div>
</template>
<script>
export default {
name: "inputcheckbox",
props: ["value", "text"],
};
</script>
Content:
<template>
<div class="container" id="app-container" v-if="showContent">
<p>Text is visible</p>
</div>
</template>
<script>
export default {
name: "maincontent",
props: ["showContent"]
}
</script>
https://codesandbox.io/embed/confident-buck-kith5?fontsize=14&hidenavigation=1&theme=dark
Hope this helps and you can learn about passing data between parent and child components in Vue documentation: https://v2.vuejs.org/v2/guide/components.html
Consider using Vuex to store and maintain the state of the checkbox. If you're not familiar with Vuex, it's a reactive datastore. The information in the datastore is accessible across your entire application.
I have created a .Vue file to feature information on a cafe (Cafe Details Page). However, I would like to take parts of this details page and make it its own component, in order to manage any template updates more efficiently.
Therefore, I have created a Component (CafeHeader.vue) inside a components folder. I am trying to pass down the data from my array (Which is being used on my Cafe Details page) to this component using Props. However, I can't seem to get it to work.
The template for my Cafe Details Page is as below:
<template>
<div>
<div v-for="cafe in activeCafe">
<CafeHeader v-bind:cafes="cafes" />
<div class="content">
<p>{{ cafe.cafeDescription }}</p>
</div>
</div>
</div>
</template>
<script>
import CafeHeader from "./../../components/CafeHeader";
import cafes from "./../../data/cafes"; // THIS IS THE ARRAY
export default {
data() {
return {
cafes: cafes
};
},
components: {
CafeHeader,
},
computed: {
activeCafe: function() {
var activeCards = [];
var cafeTitle = 'Apollo Cafe';
this.cafes.forEach(function(cafe) {
if(cafe.cafeName == cafeTitle){
activeCards.push(cafe);
}
});
return activeCards;
}
}
};
</script>
Then, in a components folder I have a component called CafeHeader where I am wanting to use the data from the array which is previously imported to the Cafe Details page;
<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
<script>
export default {
name: "test",
props: {
cafes: {
type: Array,
required: true
}
},
data() {
return {
isActive: false,
active: false
};
},
methods: {}
};
</script>
If in the CafeHeader component I have cafe in cafes, it does render data from the cafes.js However, it is every cafe in the list and I want just a single cafe.
<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
The component also needed activeCafes on the v-for
<template>
<div>
<div v-for="cafe in activeCafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
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 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>
);
},
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() {}
}
};