>>>app vue code and addtask code:
<template>
<div class="container">
<Header title="Task Tracker" />
<AddTask #add-task="addTask" />
<Tasks #toggle-reminder="toggleReminder" #delete-task="deleteTask" :tasks="tasks" />
</div>
</template>
<script>
import Header from './components/Header'
import Tasks from './components/Tasks'
import AddTask from './AddTask'
export default {
name: 'App',
components: {
Header,
Tasks,
AddTask
},
data() {
return {
tasks : []
}
},
methods: {
addTask(task) {
this.tasks = [...this.tasks, task]
},
deleteTask(id) {
if(confirm('Are you sure?')) {
this.tasks = this.tasks.filter((task) =>task.id !== id)
}
},
toggleReminder(id) {
this.tasks = this.tasks.map((task) => task.id === id ? {...task,reminder: !task.reminder } : task
)
},
},
created() {
this.tasks = [
{
id: 1,
text: 'Doctors Appointement',
day: 'March 1st at 2:30pm',
reminder: true,
},
{
id: 2,
text:'Meeting at School',
day: 'March 3rd at 1:30pm',
reminder: true,
},
{
id: 3,
text: 'Food Shopping',
day: 'March 3rd at 11:00am',
reminder: false,
},
]
}
}
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 10px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
</style>
header and tasks code:
<template>
<header>
<h1>{{title}}</h1>
<Button #toggle-add-task="$emit('toggle-add-task')" text="Add Task" color="green" />
</header>
</template>
<script>
import Button from './Button'
export default {
name:'Header',
props: {
title: String,
showAddTask: Boolean
},
components :{
Button
},
}
</script>
<style scoped>
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
<template>
<div :key="task.id" v-for="task in tasks">
<Task #toggle-reminder="$emit('toggle-reminder',task.id)" #delete-task="$emit('delete-task', task.id)" :task='task' />
</div>
</template>
<script>
import Task from './Task'
export default {
name: 'Tasks',
props: {
tasks: Array
},
components: {
Task,
},
emits: ['delete-task','toggle-reminder'],
}
</script>
Hello I got a problem with a task adder when I try and create a new task, and I click save task it doesn't work and I get an audit to warn. The new task that I add should save and appear but instead, I get a warning and it doesn't work.
Can you help me and tell me where is the problem, I checked the code and did it after a tutorial it should work but instead I just get the warning.
This is the warning that I get when I click save task: Audit usage of navigator.userAgent, navigator.appVersion, and navigator. platform
Any way to solve this?
Related
Here's my App.js
import { useState } from "react";
import { nanoid } from "nanoid";
import NotesList from "./Components/NotesList";
import Search from "./Components/Search";
import Header from "./Components/Header";
const App = () => {
const [notes, setNotes] = useState([
{
id: nanoid(),
text: "This is my first note!",
date: "05/28/2022",
},
{
id: nanoid(),
text: "This is my second note!",
date: "05/28/2022",
},
{
id: nanoid(),
text: "This is my third note!",
date: "05/28/2022",
},
]);
const [searchText, setSearchText] = useState("");
const addNote = (text) => {
const date = new Date();
const newNote = {
id: nanoid(),
text: text,
date: date.toLocaleDateString(),
};
const newNotes = [...notes, newNote];
setNotes(newNotes);
};
const updateNote = (id, text) => {
const updatedNote = {
text: text,
};
const newNotes = notes.map((notes) =>
notes.id === id ? updatedNote : notes
);
setNotes(newNotes);
};
const deleteNote = (id) => {
const newNotes = notes.filter((notes) => notes.id !== id);
setNotes(newNotes);
};
return (
<div className="container">
<Header />
<Search handleSearchNote={setSearchText} />
<NotesList
notes={notes.filter((note) =>
note.text.toLowerCase().includes(searchText)
)}
handleAddNote={addNote}
handleUpdateNote={updateNote}
handleDeleteNote={deleteNote}
/>
</div>
);
};
export default App;
My Note.js
import { MdUpdate, MdDeleteForever } from "react-icons/md";
const Note = ({ id, text, date, handleDeleteNote, handleUpdateNote }) => {
return (
<div className="note">
<span>{text}</span>
<div className="note-footer"></div>
<small>{date}</small>
<MdUpdate
onClick={() => handleUpdateNote(text)}
className="delete-icon"
size="1.3em"
/>
<MdDeleteForever
onClick={() => handleDeleteNote(id)}
className="delete-icon"
size="1.3em"
/>
</div>
);
};
export default Note;
And my NoteLIst.js
import Note from "./Note";
import AddNote from "./AddNote";
const NotesList = ({
notes,
handleAddNote,
handleDeleteNote,
handleUpdateNote,
}) => {
return (
<div className="notes-list">
{notes.map((note) => (
<Note
id={note.id}
text={note.text}
date={note.date}
handleUpdateNote={handleUpdateNote}
handleDeleteNote={handleDeleteNote}
/>
))}
<AddNote handleAddNote={handleAddNote} />
</div>
);
};
export default NotesList;
Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.notes-list {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.note.new {
background-color: peachpuff;
}
textarea {
border: none;
resize: none;
background-color: peachpuff;
}
textarea:focus {
outline: none;
}
.save {
background-color: peachpuff;
border: none;
border-radius: 15px;
padding: 5px 10px 5px 10px;
}
.save:hover {
background-color: lavender;
cursor: pointer;
}
.note {
background-color: lavender;
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}
.note-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.delete-icon {
cursor: pointer;
}
.update-icon {
cursor: pointer;
position: static;
}
.search {
display: flex;
align-items: center;
background-color: rgb(233, 233, 233);
border-radius: 10px;
padding: 5px;
margin-bottom: 1.5em;
}
.search input {
border: none;
background-color: rgb(233, 233, 233);
width: 100%;
}
.search input:focus {
outline: none;
}
What I'm trying to do is establish an update button where a user can update their Note by clicking the update button. What am I missing that's not allowing me to establish an updateNote feature? When you click on the update button, it just highlights the text on the notes section to the right of the note you click. !
};
also probably not related to the problem but you are shadowing the notes variable, which is a bad practice
Can you remove the position static
.update-icon {
cursor: pointer;
position: static;
}
To
update-icon {
cursor: pointer;
}
I have made some quizzes in javascript. When my users click the complete button at the end of the quiz I then want to make the box on the home page have a green outline around it so they know they have completed that quiz. The complete button is on the challenge1.html page and the item I want to put the outline round is the item in the grid on home.html. Would anyone be able to give me some advice on how to do this?
Files: home.html, challenge1.html, home.css, challenge1.css and quiz.js
home.html
<div class="grid-container">
<div class="grid-item item1">1. Discover HTML Basics and Tags</div>
<div class="grid-item item2">2. Styling HTML with Tags</div>
<div>3. Creating Links and Images</div>
<div class="grid-item item4">4. Building Features</div>
<div class="grid-item item5">5. Building Lists</div>
</div>
challenge1.html
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="complete-btn" class="complete-btn btn hide">Complete</button>
</div>
</div>
home.css
.grid-container {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
}
.grid-container3 {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
margin-bottom: 100px;
}
.grid-item {
background-color: #E26CBA;
padding: 20px;
font-size: 20px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
color: #3F0068;
}
.item3 {
grid-column: 1 / span 2;
grid-row: 2;
}
challenge.css
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 0%, 100%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
padding: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 20%);
background-color: hsl(var(--hue), 84%, 73%);
border-radius: 5px;
padding: 10px 10px;
margin:10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.complete-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: var(--hue-correct);
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
quiz.JS
$(document).ready(function() {
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const completeButton = document.getElementById('complete-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
completeButton.innerText = 'Complete'
completeButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What does HTML stand for?',
answers: [
{ text: 'Hyperlinks and Text Markup Language', correct: true },
{ text: 'Hyper Text Markup Language', correct: false },
{ text: 'Home Tool Markup Language', correct: false }
]
},
{
question: 'Which character is used to indicate an end tag?',
answers: [
{ text: '<', correct: false },
{ text: '*', correct: false },
{ text: '/', correct: true },
{ text: ';', correct: false }
]
},
{
question: 'Who is making the Web standards?',
answers: [
{ text: 'Google', correct: false },
{ text: 'Mozilla', correct: false },
{ text: 'Microsoft', correct: false },
{ text: 'The World Wide Web Consortium', correct: true }
]
},
{
question: 'What is the correct HTML for making a text input field?',
answers: [
{ text: '<input type="textfield">', correct: false },
{ text: '<input type="text">', correct: true },
{ text: '<textfield>', correct: false },
{ text: '<textinput type="text">', correct: false }
]
},
{
question: 'Choose the correct HTML element for the largest heading:',
answers: [
{ text: '<head>', correct: false },
{ text: '<h6>', correct: false },
{ text: '<heading>', correct: false },
{ text: '<h1>', correct: true }
]
}
]
});
As Steve mentioned in the comment above, sessionStorage (or localStorage) might be what you need. For instance, when the user completes the quiz, you can trigger the following action:
window.sessionStorage.setItem("challengeCompleted", "true")
Then, in your home.html page, you add something like:
let challengeCompleted = window.sessionStorage.getItem("challengeCompleted")
if (challengeCompleted !== null && Boolean(challengeCompleted)):
// Handle your css change here
let btn = document.getElementById("your-btn-id");
btn.style["border-color"] = "green";
Something along these lines. I didn't check the code and just wrote it quickly from memory so could have a mistake, but this is the idea.
Lastly, use localStorage if you want the webpage to always remember the user's performance and sessionStorage if performance resets every time the user comes into the website again.
I have a simple React App, where I fetch the Flickr Public Feed API and display it. Unfortunately it is mapping the array several times, where I can see repeated photos. The request always returns an array with 20 items with the same pictures, explaining the repetition.
Check the code below:
import React, { Component } from 'react';
import $ from 'jquery';
import PhotoListItem from '../../components/photoListItem';
import Searchbar from '../../components/searchBar';
import ScrollButton from '../../components/scrollButton';
import '../app/index.css';
export default class PhotoApp extends Component {
constructor(props) {
super(props);
this.state = {
photoList: [],
searchTerm: 'cyanotype',
items: 10,
loadingState: false,
}
}
componentDidMount() {
this.getPhotoList();
this.onInfiniteScroll();
}
/* get data from Flickr public feed */
getPhotoList = () => {
const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=" + this.state.searchTerm;
try {
$.ajax({
url: flickrApiPoint,
dataType: 'jsonp',
data: { format: "json" },
success: function (data) {
this.setState({ photoList: data.items });
}.bind(this)
});
}
catch (err) {
console.log(err);
}
}
/* code for infinite scroll */
onInfiniteScroll = () => {
this.refs.iScroll.addEventListener("scroll", () => {
if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20) {
this.loadMoreItems();
}
});
}
/* */
displayItems = () => {
var items = [];
for (var i = 0; i < this.state.items; i++) {
items.push(
this.state.photoList.map((photo, index) => {
const author = photo.author.split(/"/)[1];
const authorLink = photo.description.split(/"/)[1]
const description = photo.description.split(/"/)[13]
return (
<PhotoListItem
key={index}
url={photo.media.m}
photoLink={photo.link}
title={photo.title}
author={author}
authorLink={authorLink}
description={description}
tags={photo.tags} />
)
})
);
}
return items;
}
/* */
loadMoreItems = () => {
if (this.state.loadingState) {
return;
}
this.setState({ loadingState: true });
setTimeout(() => {
this.setState({ items: this.state.items + 10, loadingState: false });
}, 1000);
}
render() {
return (
<div className='appContainer' ref="iScroll">
<div className='appHeader'>
<h1 className='headerTitle'>Welcome to Flickr Alternative Photography Feed!</h1>
</div>
<div className='gridContainer'>
{this.displayItems()}
</div>
{this.state.loadingState ? <p className='loading'>Loading items...</p> : ""}
</div>
);
}
}
HERE IS THE LIVE EXAMPLE
The problem is around this.displayItems(), but how can I fix this?
Any help is appreciated. Thank you!
You can achieve this by slicing your array by the amount of items you want to show within your JSX :
this.state.photoList.slice(0, this.state.items).map(
You will then have to use the callback version of setState to use the old values of your state and increment what you want to show :
this.setState(old => ({ items: old.items + 2, loadingState: false }));
Fully functional example (using the "full page" option is recommended) :
class PhotoListItem extends React.Component {
render() {
return (
<div className="image-card">
<img className="image-card__image" alt="" src={this.props.url} />
<div className="image-card__body">
<div className="image-title">
<a href={this.props.photoLink}>{this.props.title}</a>
<span className="image-author">
{" "}
by <a href={this.props.authorLink}>{this.props.author}</a>
</span>
</div>
<div className="image-description">
<span className="description">Description:</span>{" "}
{this.props.description}
</div>
<div className="image-tags">
<span className="tags">Tags:</span> {this.props.tags}
</div>
</div>
</div>
);
}
}
class PhotoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
photoList: [],
items: 2,
searchTerm: "cyanotype",
loadingState: false
};
}
componentDidMount() {
this.getPhotoList();
this.onInfiniteScroll();
}
/* get data from Flickr public feed */
getPhotoList = () => {
const flickrApiPoint =
"https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=" +
this.state.searchTerm;
try {
$.ajax({
url: flickrApiPoint,
dataType: "jsonp",
data: { format: "json" },
success: function(data) {
this.setState({ photoList: data.items });
}.bind(this)
});
} catch (err) {
console.log(err);
}
};
/* code for infinite scroll */
onInfiniteScroll = () => {
this.refs.iScroll.addEventListener("scroll", () => {
if (
this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=
this.refs.iScroll.scrollHeight - 20
) {
this.loadMoreItems();
}
});
};
/* */
loadMoreItems = () => {
if (this.state.loadingState) {
return;
}
this.setState({ loadingState: true });
setTimeout(() => {
this.setState(old => ({ items: old.items + 2, loadingState: false }));
}, 1000);
this.getPhotoList();
};
render() {
return (
<div className="appContainer" ref="iScroll">
<div className="appHeader">
<h1 className="headerTitle">
Welcome to Flickr Alternative Photography Feed!
</h1>
</div>
<div className="gridContainer">
{this.state.photoList.slice(0, this.state.items).map((photo, index) => {
const author = photo.author.split(/"/)[1];
const authorLink = photo.description.split(/"/)[1];
const description = photo.description.split(/"/)[13];
return (
<PhotoListItem
key={index}
url={photo.media.m}
photoLink={photo.link}
title={photo.title}
author={author}
authorLink={authorLink}
description={description}
tags={photo.tags}
/>
);
})}
</div>
{this.state.loadingState ? (
<p className="loading">Loading items...</p>
) : (
""
)}
</div>
);
}
}
ReactDOM.render(<PhotoApp />, document.getElementById("root"));
body,
html {
margin: 0;
min-height: 100%;
}
.appContainer {
font-family: "Helvetica", sans-serif;
width: 100%;
height: 100vh;
overflow: auto;
}
.appHeader {
text-align: center;
background-color: #033666;
padding: 1rem;
}
.headerTitle {
color: #fff;
}
.gridContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
padding: 1rem;
grid-gap: 1rem 1rem;
}
.loading {
text-align: center;
color: #033666;
}
#media only screen and (max-width: 320px) {
.appHeader>h1 {
font-size: 1.2rem;
}
}
a,
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #033666;
text-decoration: underline;
}
.image-card {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
width: auto;
height: auto;
margin: .5rem;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
background: #fff;
}
.image-card__image {
border-radius: 5px 5px 0 0;
width: 100%;
height: 200px;
object-fit: cover;
}
.image-card__body {
padding: .5rem 1rem 1rem;
}
.image-title {
font-weight: 600;
margin: 0;
word-wrap: break-word;
padding-bottom: .7rem;
cursor: pointer;
}
.image-author {
font-weight: 100;
font-size: .8rem;
cursor: pointer;
}
.image-owner {
margin-top: 0;
font-size: .8rem;
}
.image-date-view-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.image-description {
padding-bottom: .7rem;
font-size: .9rem;
word-wrap: break-word;
}
.tags,
.description {
font-weight: 600;
}
.image-tags {
font-size: .8rem;
word-wrap: break-word;
}
.App {
font-family: sans-serif;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root" />
I want to create a custom select component in Vue.js. Since I need specific options styling, I need to create 'select' made of div's etc that looks and acts like a real html select.
Currently I have something like this:
Vue.component('child', {
template: `<div class="component-container" #click="showOptions = !showOptions">
<div class="component__select">
<span class="component__select--name">Select Fruit</span>
<span class="c-arrow-down" v-if="!showOptions"></span>
<span class="c-arrow-up" v-if="showOptions"></span>
</div>
<ul class="component__select-options" v-if="showOptions" >
<li class="select--option" v-for="option in options">
<label> <input type="checkbox" :value="option"/> {{option.name}}</label>
</li>
</ul>
</div>`,
methods: {
selectOption(option) {
this.$emit('option', option)
}
},
data: () => ({
showOptions: false,
}),
props: ['options']
});
var vm = new Vue({
el: '#app',
data: () => ({
options: [
{id: 0, name: 'Apple'},
{id: 1, name: 'Banana'},
{id: 2, name: 'Orange'},
{id: 2, name: 'Strawberry'},
],
selectedFruit: ''
}),
})
.component__select {
height: 38px;
background-color: #F5F7FA;
border: 1px solid #dddddd;
line-height: 38px;
display: grid;
max-width: 500px;
grid-template-columns: 10fr 1fr;
}
.component__select--name {
font-size: 0.8rem;
padding: 0 0 0 25px;
cursor: pointer;
}
.c-arrow-down {
justify-self: end;
}
.component__select-options {
max-height: 180px;
border: 1px solid #dddddd;
border-top: none;
overflow: auto;
position: absolute;
z-index: 1500;
max-width: 500px;
width: 500px;
margin: 0;
padding: 0;
}
.select--option {
height: 35px;
display: grid;
align-content: center;
padding: 0 0 0 25px;
background-color: #f5f5fa;
border-bottom: 1px solid #dddddd;
}
.select--option:last-child {
border-bottom: none;
}
.select--option:nth-child(2n) {
background-color: #ffffff;
}
.select--option input{
display: none;
}
.single-option {
height: 55px;
background-color: #2595ec;
font-size: 0.8rem;
border: 1px solid red;
}
.cust-sel {
width: 200px;
height: 38px;
background-color: #f5f5fa;
border: 1px solid #dddddd;
}
.cust-sel:focus {
outline-width: 0;
}
<html>
<head>
<title>An example</title>
</head>
<body>
<div id="app">
<span> This is parent component</span>
<p>I want to have data from select here: "{{selectedFruit}}"</p>
<child :options="options" v-model="selectedFruit"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
But my problem is now how to return data from child to parent component using v-model on child component.
(I know I could emit data from child component and do:
<custom-select :options="someOptions" #selected="setSelectedOption"/>
but I need it to be reusable and writing more and more methods to retrieve data from every select in parent component is not exactly how it should work I think.)
Also I need to have an entire object returned, not only ID. (that's why i've got :value="option")
Any ideas?
As Vue Guide said:
v-model is essentially syntax sugar for updating data on user input
events, plus special care for some edge cases.
The syntax sugar will be like:
the directive=v-model will bind value, then listen input event to make change like v-bind:value="val" v-on:input="val = $event.target.value"
So for your use case, you need to create one prop=value, then emit the selected option with event=input.
Like below demo (bind/emit the whole option object):
Vue.config.productionTip = false
Vue.component('child', {
template: `<div class="component-container" #click="showOptions = !showOptions">
<div class="component__select">
<span class="component__select--name">{{value ? value.name : 'Select Fruit'}}</span>
<span class="c-arrow-down" v-if="!showOptions"></span>
<span class="c-arrow-up" v-if="showOptions"></span>
</div>
<ul class="component__select-options" v-if="showOptions" >
<li class="select--option" v-for="option in options" #click="selectOption(option)">
<label> <input type="checkbox" :value="option"/> {{option.name}}</label>
</li>
</ul>
</div>`,
methods: {
selectOption(option) {
this.$emit('input', option)
}
},
data: () => ({
showOptions: false
}),
props: ['options', 'value']
});
var vm = new Vue({
el: '#app',
data: () => ({
options: [
{id: 0, name: 'Apple'},
{id: 1, name: 'Banana'},
{id: 2, name: 'Orange'},
{id: 2, name: 'Strawberry'},
],
selectedFruit: ''
}),
})
.component__select {
height: 38px;
background-color: #F5F7FA;
border: 1px solid #dddddd;
line-height: 38px;
display: grid;
max-width: 500px;
grid-template-columns: 10fr 1fr;
}
.component__select--name {
font-size: 0.8rem;
padding: 0 0 0 25px;
cursor: pointer;
}
.c-arrow-down {
justify-self: end;
}
.component__select-options {
max-height: 180px;
border: 1px solid #dddddd;
border-top: none;
overflow: auto;
position: absolute;
z-index: 1500;
max-width: 500px;
width: 500px;
margin: 0;
padding: 0;
}
.select--option {
height: 35px;
display: grid;
align-content: center;
padding: 0 0 0 25px;
background-color: #f5f5fa;
border-bottom: 1px solid #dddddd;
}
.select--option:last-child {
border-bottom: none;
}
.select--option:nth-child(2n) {
background-color: #ffffff;
}
.select--option input{
display: none;
}
.single-option {
height: 55px;
background-color: #2595ec;
font-size: 0.8rem;
border: 1px solid red;
}
.cust-sel {
width: 200px;
height: 38px;
background-color: #f5f5fa;
border: 1px solid #dddddd;
}
.cust-sel:focus {
outline-width: 0;
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<span> This is parent component</span>
<p>I want to have data from select here: "{{selectedFruit}}"</p>
<child :options="options" v-model="selectedFruit"></child>
</div>
When using v-model on custom component all you need is to declare a prop named 'value' and when you need the component to chance it emit an 'input' event.
Something like this:
<template>
<form #submit.prevent="$emit('onSearch',val)" class="form-perfil">
<div class="form-group col-md-12">
<input v-model="val" #input="$emit('input',val)"
placeholder="filtrar resultados" class="form-control">
</div>
</form>
</template>
<script>
module.exports = {
name: "CaixaFiltro",
props: ["value"],
data: _ => ({ val: "" }),
created() {
this.val = this.value
}
}
</script>
Then you can use (after register the component) it like this:
<caixa-filtro v-model="textoBusca" #onSearch="listar"></caixa-filtro>
You can find more detailed info there:
I am building a Tic Tac Too game with vue.js framework. I have declared a vue component called grid-item, when this item is clicked I want it to call the handleClick method.
when I run the code bellow it logs to the console that the handleClick method is not defined.
How to fix the problem and get access to this method from the component ?
// vue components
Vue.component("grid-item", {
template: "#grid-item",
data: function() {
return {
sign: "X",
owner: ""
}
}
})
// vue instance
new Vue({
el: "#app",
data: {
matriceSize: 3,
},
methods: {
handleClick: function() {
alert("checked");
}
}
})
* {
box-sizing: border-box;
}
#game-box {
width: 150px;
display: block;
margin: 0px auto;
padding: 0px;
background: green;
}
.grid-item {
display: inline-block;
width: 33.333%;
height: 50px;
background: yellow;
margin: 0px;
text-align: center;
line-height: 50px;
border: 1px solid
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="game-box">
<grid-item v-for="n in 9"></grid-item>
</div>
</div>
<template id="grid-item">
<div class="grid-item" #click="handleClick"></div>
</template>
You are getting this error as you have defined handleClick method in component : app but you are using this in the template of grid-item, where it is not defined.
Scope of vue methods is limited to the instance they have been defined.
// vue components
Vue.component("grid-item", {
template: "#grid-item",
data: function() {
return {
sign: "X",
owner: ""
}
},
methods: {
handleClick: function() {
alert("checked");
}
}
})
// vue instance
new Vue({
el: "#app",
data: {
matriceSize: 3,
}
})
* {
box-sizing: border-box;
}
#game-box {
width: 150px;
display: block;
margin: 0px auto;
padding: 0px;
background: green;
}
.grid-item {
display: inline-block;
width: 33.333%;
height: 50px;
background: yellow;
margin: 0px;
text-align: center;
line-height: 50px;
border: 1px solid
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="game-box">
<grid-item v-for="n in 9"></grid-item>
</div>
</div>
<template id="grid-item">
<div class="grid-item" #click="handleClick"></div>
</template>