I just started my journey in vue, how to make the input data take a number into itself, and then display it in a variable, and if you enter 2 times, then add them up.
<template>
<div class="portfel">
<div class="profile">
<div class="content__prof">
<div class="ico__prof"><img src="" alt=""></div>
<div class="buttom__prof">
<input id="txtName" #keyup.enter="addMessage" v-model="myMoney" type="text">
<button #click="addMoney">Sum</button>
</div>
<div class="value__prof">
<div>$: {{myMoney}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
myMoney:null,
dollar:0
}
},
methods:{
addMomey(){
this.myMoney.push(this.myMoney)
}
}
}
I tried to do it, but it turns out just a direct transfer to a variable
Check this out:
<script>
export default {
data() {
return {
myMoney: 0,
dollar: 0
}
},
methods: {
addMoney() {
this.dollar += this.myMoney
}
}
}
</script>
<template>
<input v-model.number="myMoney" />
<button #click="addMoney">Add
</button>
<div>
dollar: {{this.dollar}}
</div>
</template>
If you want to use enter, wrap it in a form and listen for #submit.prevent, like this:
<form #submit.prevent="addMoney">
<input v-model.number="myMoney" />
<button type="submit">Add</button>
</form>
Related
See this images
i dont want to display here those elements
See the Below code sample
sample.blade.php
<create-form id= "create_form" title="Sample Form" >
<div class="col-md-6">
<label class="form-label" for="multicol-username">Username</label>
<input type="text" id="multicol-username" class="form-control" placeholder="john.doe" name="ma_user_id" data-type="varchar" required>
</div>
<div class="col-md-6">
<label class="form-label" for="multicol-email">Email</label>
<div class="input-group input-group-merge">
<input type="text" id="multicol-email" class="form-control" placeholder="john.doe" aria-label="john.doe" aria-describedby="multicol-email2" name="password" data-editmode="false" data-editname="email">
<span class="input-group-text" id="multicol-email2">#example.com</span>
</div>
</div>
</create-form>
createForm.vue
<template>
<div class="card mb-4" v-show="showForm">
<h5 class="card-header">{{title}}</h5>
<form class="card-body" id="createForm" enctype="multipart/form-data" ref="createForm">
<div class="row g-3">
<slot></slot>
<div class="pt-4">
<button type="submit" class="btn btn-primary me-sm-3 me-1" id="save_return">Submit</button>
<button type="reset" class="btn btn-label-secondary" #click="hideForm">Cancel</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
props: ['title'],
setup() {},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
app.js
require('./bootstrap')
import { createApp } from 'vue'
import createForm from './components/createForm';
const app = createApp({})
app.component('create-form', createForm);
app.mount('#app')
It sounds like you want the template that's rendered by the php backend to not be visible until vue is able to handle it, though I'm not 100% sure that's the case.
If that is the case, you could use the v-cloak directive
This directive is only needed in no-build-step setups.
When using in-DOM templates, there can be a "flash of un-compiled templates": the user may see raw mustache tags until the mounted component replaces them with rendered content.
v-cloak will remain on the element until the associated component instance is mounted. Combined with CSS rules such as [v-cloak] { display: none }, it can be used to hide the raw templates until the component is ready.
<create-form id="create_form" title="Sample Form" v-cloak>
...
<style>
[v-cloak] { display: none }
</style>
I developed one page called Dashboard.vue and this page contains three child components(Display,sortBooksLowtoHigh,sortBooksHightoLow). Dashboard component contains one select options also inside that it have two options "Price:High to Low and Price:Low to High ",
if i click on price:LowToHigh option then it hides the Display component and displays the sortBooksLowtoHigh component utpo this it's working fine,
Now i import one more component called sortBooksHightoLow when i click on "price:High to Low" option it should hides the DisplayComponent and displays the sortBooksHightoLow component.How to acheive this thing please help me
Dashboard.vue
<template>
<div class="main">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" class="education-image" />
</div>
<ul class="nav navbar-nav">
<li>
<p class="brand">Bookstore</p>
</li>
</ul>
<div class="input-group">
<i #click="handlesubmit();" class="fas fa-search"></i>
<div class="form-outline">
<input type="search" v-model="name" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right" id="right-bar">
<li><a> <i class="far fa-user"></i></a></li>
<p class="profile-content">profile</p>
<li><a><i class="fas fa-cart-plus"></i></a></li>
<p class="cart-content">cart</p>
</ul>
</div>
<div class="mid-body">
<h6>Books<span class="items">(128items)</span></h6>
<select class="options" #change="applyOption">
<option disabled value="">Sort by relevance</option>
<option value="HighToLow">price:High to Low</option>
<option value="LowToHigh">price:Low to High</option>
</select>
</div>
<DisplayBooks v-show="flag==='noOrder'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" />
<sortBooksHightoLow v-show="flag==='highToLow'" />
</div>
</template>
<script>
import service from '../service/User'
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
export default {
components: {
DisplayBooks,
sortBooksLowtoHigh,
sortBooksHightoLow
},
data() {
return {
flag: 'noOrder',
brand: 'Bookstore',
name: '',
visible:true,
books: [{
}]
}
},
methods: {
flip() {
this.flag = !this.flag;
},
applyOption(evt) {
if (evt.target.value === "HighToLow") this.flag = 'highToLow';
else this.flag = 'lowToHigh';
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/Dashboard.scss";
</style>
sortBooksHightoLow.vue
<template>
<div class="carddisplay-section">
<div v-for="book in books" :key="book.id" class="card book">
<div class="image-section">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="title-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label class="default">(2000)</label>
<button v-if="flag" class="btn-grp" type="submit" #click="handlesubmit();Togglebtn();">close</button>
</div>
<div class="buttons">
<div class="button-groups">
<button type="button" #click="toggle(book.id);flip(book.id);" v-if="state==true" class="AddBag">Add to Bag</button>
<button v-if="state==true" class="wishlist">wishlist</button>
</div>
<div v-if="state==false" class="AddedBag">
<button class="big-btn">Added to Bag</button>
</div>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
data() {
return {
result: 0,
authorPrefix: 'by',
pricePrefix: 'Rs.',
defaultStrikePrice: '(2000)',
buttonValue: 'close',
flag: true,
state: true,
clickedCard: '',
books: [{
id: 0,
file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
name: 'High to Low',
author: 'Saioii',
price: '1500'
}, ]
}
},
methods: {
toggle(id) {
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
console.log(this.clickedCard);
},
flip() {
this.state = !this.state;
},
Togglebtn() {
this.flag = !this.flag;
},
handlesubmit() {
service.userDisplayBooksHightoLow().then(response => {
this.books.push(...response.data);
})
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/DisplayBooks.scss";
</style>
sortBooksLowtoHigh.vue
<template>
<div class="carddisplay-section">
<div v-for="book in books" :key="book.id" class="card book">
<div class="image-section">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="title-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label class="default">(2000)</label>
<button v-if="flag" class="btn-grp" type="submit" #click="handlesubmit();Togglebtn();">close</button>
</div>
<div class="buttons">
<div class="button-groups">
<button type="button" #click="toggle(book.id);flip(book.id);" v-if="state==true" class="AddBag">Add to Bag</button>
<button v-if="state==true" class="wishlist">wishlist</button>
</div>
<div v-if="state==false" class="AddedBag">
<button class="big-btn">Added to Bag</button>
</div>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
data() {
return {
result: 0,
authorPrefix: 'by',
pricePrefix: 'Rs.',
defaultStrikePrice: '(2000)',
buttonValue: 'close',
flag: true,
state: true,
clickedCard: '',
books: [{
id: 0,
file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
name: 'Default Card',
author: 'Sai',
price: '..'
}, ]
}
},
methods: {
toggle(id) {
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
console.log(this.clickedCard);
},
flip() {
this.state = !this.state;
},
Togglebtn() {
this.flag = !this.flag;
},
handlesubmit() {
service.userDisplayBooksLowtoHigh().then(response => {
this.books.push(...response.data);
console.log(this.response);
})
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/DisplayBooks.scss";
</style>
emmmm...
HightoLow => HighToLow.
There can be several methods, in my opinion, to achieve conditional rendering of components which I think your question asks for. Two of them which are highly useful are:
Using v-if and v-else where you must define a flag that handles the logic for component rendering. Also, wrapping them in a transition tag would a good idea to make the switch with a transition.
<transition>
<component1 v-if="flag" />
<component2 v-else />
</transition>
Dynamic Components, we use the component tag and is attribute. The component can then be switched using the name of the component.
<component is="nameofComponent" />
You can read more about dynamic components in vuejs docs.
While the dynamic component looks neat, a switch with transition can be a nice addition.
I am using jQuery date picker and its working perfectly. I am in Vue component. when I click the date input field it shows date picker but when I choose one date and see the result in the console I got nothing. Date is not bind.
<form #submit.prevent="search()">
<div class="card">
<div class="card-body">
<div class="card-header"></div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<input type="text" v-model="date" class="form-control" id="datepicker" >
</div>
<div class="col-md-4">
<button class="btn btn-primary" >Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
export default {
data(){
return{
date:''
}
},
mounted() {
console.log('Component mounted.')
},
methods:{
search(){
//I want to get user chooses date here so that I can send to endpoint
console.log(this.date)//got nothing here
},
},
}
</script
when i click the search button , i should get the date in console but i got nothing, How to get current selected date by user? Thank you
You can bind the input inside mounted hook with the jquery date picker.
new Vue({
el: '#app',
data() {
return {
date: ''
}
},
mounted() {
console.log('Component mounted.');
let selfInstance = this;
$('#datepicker').datepicker({
onSelect: function(selected, datePicker) {
selfInstance.date = selected;
}
});
},
methods: {
search() {
//I want to get user chooses date here so that I can send to endpoint
console.log(this.date) //got nothing here
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<form id="app" #submit.prevent="search">
<div class="card">
<div class="card-body">
<div class="card-header"></div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<input type="text" v-model="date" class="form-control" id="datepicker">
</div>
<div class="col-md-4">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
Note: this.date will not work inside the jquery blocks. So an instance should be defined to assign with vue.
I want to change only the color of the string in 'subMsg'. I don't want the color to affect the 'HomeContent' too.
<template>
<div class="submit">
<HomeContent v-bind:style="{ color: color }" subMsg="* Required"/>
<div id="buttons">
<button type="button" class="btn btn-light"><router-link to="/about">Back</router-link></button>
<button type="button" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</template>
I alocated a different string to the same subMsg in another component but in this component. I want the color to the different for only this subMsg component.
import HomeContent from "#/components/HomeContent.vue";
export default {
name: "Submit",
components: {
HomeContent
},
data() {
return {
color: "red"
}
}
}
Is it possible to change the color?
you can do something like this:
parent component:
//HTML part
<HomeContent :subMsg="{color:subMsgColor,message:'* Required'}"/>
// script part
data() {
return {
subMsgColor: "red"
}
HomeContent component:
<template>
<div class="hello">
<div class="card">
<div class="card-content">
<h1>{{ msg }}</h1>
<p :style="{color:subMsg.color}">{{ subMsg.message }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
msg: "Data Collection"
};
},
props: {
subMsg: {
type:Object,
default:null
}
}
}
</script>
<div v-for="deck in decks" :key="deck._id" slot="content">
<div class="level">
<div class="level-left">
<div>
<p>{{ deck._id }}</p>
<p class="has-text-weight-semibold">{{ deck.title }}</p>
<p>Boards: {{ deck.board1 }}</p>
<p>Primary color: {{ deck.board1Color }}</p>
<p>
L/W/H: {{ deck.deckLength }}ft, {{ deck.deckWidth }}ft,
{{ deck.deckHeight }}ft
</p>
</div>
</div>
<div class="level-right">
<form #submit.prevent="deleteDeck">
<button type="submit" class="button">Delete</button>
</form>
</div>
</div>
<br />
</div>
I'm able to access this object's id within the v-for loop, but not in the method called by the delete button.
methods: {
deleteDeck() {
const deckId = this.deck._id;
alert(deckId);
}
}
The id of this individual deck will be passed into an axios delete request, but for now I'm just trying to figure out how to access it. this.id contains the id from the greater object that this object belongs to.
All you have to do is pass the id to the method from the template:
Template HTML
...
<form #submit.prevent="deleteDeck(deck.id)">
<button type="submit" class="button">Delete</button>
</form>
Component
methods: {
deleteDeck (id) {
alert(id)
}
}
I would pass the object in a function argument.
In the template:
<div v-for="deck in decks" :key="deck._id" slot="content">
...
<form #submit.prevent="deleteDeck(deck)">...</form>
...
</div>
And in methods:
methods: {
deleteDeck(deck) {
/* use deck here */
}
}
You must pass deck as an argument of deleteDeck :
<form #submit.prevent="deleteDeck(deck)">
<button type="submit" class="button">Delete</button>
</form>
Vue.config.productionTip = false;
new Vue({
data() {
return {
decks: [
{_id: 1,title: "Foo"},
{_id: 2,title: "Bar"}
]
};
},
methods: {
deleteDeck(id) {
this.decks = this.decks.filter(deck => deck._id !== id);
}
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="deck in decks" :key="deck._id" slot="content">
<div class="level">
<div class="level-left">
<div>
<p>{{ deck._id }}</p>
<p class="has-text-weight-semibold">{{ deck.title }}</p>
</div>
</div>
<div class="level-right">
<button #click="deleteDeck(deck._id)" class="button">Delete</button>
</div>
</div>
</div>
</div>