I'm trying to create a custom checkbox with Vue 3 and the composition API following this example, but even when I can see on devtools that all my props and bound data are passing from the parent component to the child component the checkbox UI won't change when the checkbox is checked:
Parent Component:
<template>
<div class="flex">
<div class="flex">
<span>Detected Language</span>
<BaseCheckBox
v-model:checked="translationOn"
fieldId="translate"
label="Translate"
class="ml-4"
/>
</div>
</div>
</template>
<script>
import BaseCheckBox from './BaseCheckBox.vue'
import { ref } from 'vue'
export default {
setup() {
const translationOn = ref(false)
return {
translationOn,
}
},
components: { BaseCheckBox },
}
</script>
Child Component:
<template>
<div class="flex">
<input
#input="(event) => $emit('update:checked', event.target.checked)"
type="checkbox"
:checked="checked"
:id="fieldId"
class="mr-2 hidden"
/>
<label
:for="fieldId"
class="flex flex-row items-center cursor-pointer select-none"
>
<i
class="fa mr-1"
:class="{
'fa-check-square text-blue-600': checked,
'fa-square border-2 border-gray-700 text-white': !checked,
}"
></i>
{{ label }}
</label>
</div>
</template>
<script>
export default {
props: {
label: String,
fieldId: {
type: String,
required: true,
},
checked: {
type: Boolean,
},
},
}
</script>
Whenever I click the checkbox I can see that the "translationOn" property on the parent change its value and the "checked" prop on the children change its value too but the font-awesome classes that are supposed to switch depending on that value don't:
<i
class="fa mr-1"
:class="{
'fa-check-square text-blue-600': checked,
'fa-square border-2 border-gray-700 text-white': !checked,
}"
></i>
The strange thing (at least for me) is that when I manually change the value in the code in this line of the parent component:
const translationOn = ref(true)
From "true" to "false" or viceversa it works but not when I click on the checkbox, even when I can see all the values behaving accordingly.
Will really appreciate any help! Thanks!
So found the answer to this problem here
For some reason the font-awesome classes are not reactive hence ignore the vue directive to conditional render the html. Find the answer (basically wrap the <i> tag within a <span> tag) on the link.
Related
I have a simple setup: I have a parent component that passes data using props to a child component. However, when I pass the props to the child component, the data is not filled in. All the tutorials and guides I've followed use the same syntax as I'm using, so I must be missing something. I just can't seem to figure out what.
// LoginPage.vue
<script>
import Card from '../generic/Card.vue';
import Input from '../generic/Input.vue';
export default {
components: {
Card,
Input,
}
}
</script>
<template>
<Card>
<template v-slot:title>Sign in</template>
<template v-slot:content>
<Input :type="text" :placeholder="Email"></Input>
</template>
</Card>
</template>
// generic/Card.vue
<template>
<div class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
<div class="text-xl font-medium text-black">
<slot name="title"></slot>
</div>
<slot name="content"></slot>
</div>
</template>
// generic/Input.vue
<script>
export default {
props: {
type: String,
placeholder: String,
value: String,
}
}
</script>
<template>
<input type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"/>
</template>
When I take a look at the code in the browser, I get this:
<div id="app" data-v-app="">
<div class="flex h-screen">
<div class="m-auto">
<div class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
<div class="text-xl font-medium text-black">Sign in</div>
<input type="{{ type }}" placeholder="{{ placeholder }}">
</div>
</div>
</div>
</div>
This line is the problem:
<input type="{{ type }}" placeholder="{{ placeholder }}">
The data does not get filled in where I want them to, but it just returns {{ type }} or {{ placeholder }}, without actually filling in the passed props.
What am I doing wrong?
Mustache {{ }} is actually used for display purposes.
If we want to bind any variable inside an HTML attribute, we should use the v-bind directive.
<input v-bind:type="type" v-bind:placeholder="placeholder">
// OR
<input :type="type" :placeholder="placeholder">
A small tip-
We should avoid using the reserved keywords as variable names like type, define, and many more. It can create confusion.
What you did is also fine but it's better to use the props like this-
props: {
type: {
type: String,
// add any other validation
},
placeholder: {
type: String,
// add any other validation
}
}
Try to bind props in component:
<input :type="type" :placeholder="placeholder" :value="value"/>
well i'm new to vue js and developing an application with a search function.
This is my component where the search results will be rendered.
<script>
import RecipeItem from "../recipe/RecipeItem";
import { baseApiUrl } from "#/global";
import axios from "axios";
import PageTitle from "../template/PageTitle";
export default {
name: "Search",
components: { PageTitle, RecipeItem },
data() {
return {
recipes: [],
recipe: {},
search: '',
}
},
methods: {
getRecipes() {
const url = `${baseApiUrl}/search?search=${this.search}`;
axios(url).then((res) => {
this.recipes = res.data;
});
}
},
watch: {
search() {
const route = {
name: 'searchRecipes'
}
if(this.search !== '') {
route.query = {
search: this.search
}
}
},
'$route.query.search': {
immediate: true,
handler(value) {
this.search = value
}
}
},
};
</script>
<template>
<div class="recipes-by-category">
<form class="search">
<router-link :to="{ path: '/search', query: { search: search }}">
<input v-model="search" #keyup.enter="getRecipes()" placeholder="Search recipe" />
<button type="submit">
<font-icon class="icon" :icon="['fas', 'search']"></font-icon>
</button>
</router-link>
</form>
<div class="result-search">
<ul>
<li v-for="(recipe, i) in recipes" :key="i">
<RecipeItem :recipe="recipe" />
</li>
</ul>
</div>
</div>
</template>
ok so far it does what it should do, searches and prints the result on the screen.
But as you can see I created the search field inside it and I want to take it out of the search result component and insert it in my header component which makes more sense for it to be there.
but I'm not able to render the result in my search result component with my search field in the header component.
but I'm not able to render the result in my search result component with my search field in the header component.
Header component
<template>
<header class="header">
<form class="search">
<input v-model="search" #keyup.enter="getRecipes()" placeholder="Search recipe" />
<router-link :to="{ path: '/search', query: { search: this.search }}">
<button type="submit">
<font-icon class="icon" :icon="['fas', 'search']"></font-icon>
</button>
</router-link>
</form>
<div class="menu">
<ul class="menu-links">
<div class="item-home">
<li><router-link to="/">Home</router-link></li>
</div>
<div class="item-recipe">
<li>
<router-link to="/"
>Recipes
<font-icon class="icon" :icon="['fa', 'chevron-down']"></font-icon>
</router-link>
<Dropdown class="mega-menu" title="Recipes" />
</li>
</div>
<div class="item-login">
<li>
<router-link to="/auth" v-if="hideUserDropdown">Login</router-link>
<Userdropdown class="user" v-if="!hideUserDropdown" />
</li>
</div>
</ul>
</div>
</header>
</template>
Result component
<template>
<div class="recipes-by-category">
<div class="result-search">
<ul>
<li v-for="(recipe, i) in recipes" :key="i">
<RecipeItem :recipe="recipe" />
</li>
</ul>
</div>
</div>
</template>
Keep the state variables in whatever parent component is common to both the header component and the results component. For example, if you have a Layout component something like this:
<!-- this is the layout component -->
<template>
<HeaderWithSearch v-on:newResults="someFuncToUpdateState" />
<ResultsComponent v-bind:results="resultsState" />
</template>
<!-- state and function to update state are in a script here... -->
When the search bar returns results you need to pass that data "up" to the parent component with an $emit call, then the parent component can then pass that state back down to the results component using normal props.
Check out this documentation: https://v2.vuejs.org/v2/guide/components-custom-events.html
Be sure to pay special attention to the .sync part of the documentation and determine if that's something you need to implement as well.
Unless you want to use a more complicated state management library like vuex (which shouldn't be necessary in this case) you can just keep state in a common parent and use $emit to pass up and props to pass down.
Hi everyone i have a big trouble i need to modify the value of checkbox from parent to another parent to child , is not this difficulty i know but i'm at the start and after spent 2 days for this i can't try anything else , now i'll add all the code the child is named "UICheckbox" and i pass it to "ToDoListItem" and this last is passed to "ToDoList" , and every Todos is an in an array into "store.js"
UICheckbox
<template>
<div class="checkbox-container">
<input
type="checkbox"
:id="id"
:v-model="localTodo"
>
<label :for="id">
<p class="font-bold">{{ text }}</p>
</label>
</div>
</template>
<script>
export default {
props: [
"id",
"value",
"text"
],
data() {
return {
localTodo: this.value
}
},
watch: {
localTodo:{
handler(newVal, oldVal) {
this.$emit("change", newVal)
},
deep: true,
}
}
}
</script>
<style>
</style>
ToDoListItem
<template>
<div class="flex flex-row w-full my-2">
<UICheckbox
:v-model="localTodo.checked"
:id="todo.id"
:text="todo.text"
#change="localTodo.cheked = $event"
/>
<delete-button :todo="todo" />
</div>
</template>
ToDoList
<to-do-list-item
:todo="todo"
#click="changeChecked(todo)"
#change="todo.checked = $event"
/>
I have two components: Toggle.vue which is basically a button and a TestToggle.vue which has two Toggle components inside. I want to be able for the toggle elements to serve as a radio button of sorts: only one can be selected at a time.
It is supposed to look like this (only one button is active at a time):
However I can select two buttons:
which isn't right.
Toggle.vue:
<template>
<div class="rounded-full m-5 w-40
flex justify-center
p-2 cursor-pointer"
:class = "status ? 'bg-green-700
hover:bg-green-600' :
'bg-red-700
hover:bg-red-600'"
v-on:click="status = true">
<p>{{text}} : {{status}}</p>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: ''
},
status: {
type: Boolean,
default: false
}
}
}
</script>
TestToggle.vue:
<template>
<div>
<p>Active: {{activeTab}}</p>
<Toggle v-on:click = "activeTab = 1"
text="Toggle 1 "/>
<Toggle v-on:click = "activeTab = 2"
text = "Toggle 2"/>
</div>
</template>
<script>
import Toggle from '../test/Toggle.vue';
export default {
components: {Toggle},
data: function () {
return {
activeTab: 1
}
},
methods: {
}
}
</script>
I think I need to set status = false from TestToggle to Toggle when another Toggle is clicked? How do I do that? Or should I do it completely differently?
Another problem is that I can't update activeTab data property inside TestToggle component: it always shows 1...
EDIT:
I tried this code (as suggested in the answer), but it just doesn't work: the buttons don't react to clicks:
Toggle.vue:
<template>
<div class="rounded-full m-5 w-40
flex justify-center
p-2 cursor-pointer"
:class = "status ? 'bg-green-700 hover:bg-green-600' :
'bg-red-700 hover:bg-red-600'">
<p>{{text}} : {{status}}</p>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: ''
},
status: {
type: Boolean,
default: false
}
}
}
</script>
TestToggle.vue:
<template>
<div>
<p>Active: {{activeTab}}</p>
<Toggle v-on:click = "activeTab = 1"
text="Toggle 1 "
v-bind:status="activeTab === 1"/>
<Toggle v-on:click = "activeTab = 2"
text = "Toggle 2"
v-bind:status="activeTab === 2"/>
</div>
</template>
<script>
import Toggle from '.././toggle-so/Toggle.vue';
export default {
components: {Toggle},
data: function () {
return {
activeTab: 1
}
},
methods: {
}
}
</script>
In Toggle.vue, status is declared as a prop, so you should not modify it:
<template>
<div class="rounded-full m-5 w-40
flex justify-center
p-2 cursor-pointer"
:class = "status ? 'bg-green-700
hover:bg-green-600' :
'bg-red-700
hover:bg-red-600'"
<p>{{text}} : {{status}}</p>
</div>
</template>
but pass it to Toggle.vue from TestToggle.vue:
<template>
<div>
<p>Active: {{activeTab}}</p>
<Toggle v-on:click.native = "activeTab = 1"
text="Toggle 1 "
v-bind:status="activeTab === 1"/>
<Toggle v-on:click.native = "activeTab = 2"
text = "Toggle 2"
v-bind:status="activeTab === 2"/>
</div>
</template>
If you change the status in Toggle.vue, you make it independent of every other Toggle, but if you want a radio button behavior, each status is dependent of other statuses. That's why you need to manage if from the parent component.
You also need to use the native event modifier to listen to the div click of the children.
I made a simple JSFiddle to show a working example.
I need some help in Vue JS and Laravel with adding a child vue component.
I have a parent component called "wrapper" and some child components called like "show-1", "show-2", "show-3" ... etc.
Parent component:
<template>
<div class="card border-light">
<div class="card-header">
<h5 class="title">{{ title }}</h5>
</div>
<div class="card-body">
<component
is="view"
></component >
</div>
<div class="card-footer"></div>
</div>
</template>
<script>
export default {
props : ['title'],
data() {
return {
view : ''
}
}
}
</script>
An exmaple child component like "show-1":
<template>
<div> show-1 </div>
</template>
This code below is in blade for rendering wrapper component with a dynamic child component name:
<wrapper
title="Example"
view="show-1"
></wrapper>
This code is not working but if i change the parent view data "show-1" instead of empty, it works. why ?
When I change the view prop, child vue component should be changed too. How could I do this ?
I want to pass the view attribute to parent component dynamically.
You can use :is attribute. You can read more about it here:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
You can use the same mount point and dynamically switch between
multiple components using the reserved element and
dynamically bind to its is attribute....
<template>
<div class="card border-light">
<div class="card-header">
<h5 class="title">{{ title }}</h5>
</div>
<div class="card-body">
<!-- make sure to use : -->
<component v-if="view" :is="view"></component >
</div>
<div class="card-footer"></div>
</div>
</template>
<script>
export default {
props : ['title'],
data() {
return {
view : ''
}
}
}
</script>
#Eduardo has the right answer. To add to it, import your components into the parent and switch between them via a data property:
...
<component :is="current"></component >
...
data: {
current: 'show1'
},
components: {
show1: Show1Component,
show2: Show2Component,
show3: Show3Component
}
The key is to bind the component using the name of the dynamic component.
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components