I'm trying to display an image based on the concatenation of a fixed path and a property.
Do you know how I can do that?
<script>
export default {
props: {
id: String
}
}
</script>
<template>
<img src="#/assets/covers/{{id}}.jpg" width="240" height="180" />
<img src="'#/assets/covers/' + id + '.jpg'" width="240" height="180" />
<img src="`#/assets/covers/${id}.jpg`" width="240" height="180" />
<h1>#/assets/covers/{{id}}.jpg</h1>
</template>
I tried these 3 solutions but none are working. The h1 is displaying what I want though.
I even tried this:
<script>
export default {
props: {
id: String
},
data() {
return {
url: "#/assets/covers/" + this.id + ".jpg"
}
}
}
</script>
<template>
<img src="#/assets/covers/title.jpg" width="240" height="180" />
<img src=url width="240" height="180" />
<h1>#/assets/covers/title.jpg</h1>
<h1>{{url}}</h1>
</template>
The two h1 displays the exact same text, but only the first image is showing, not the second one.
Here I've described how to use images in vue3. Probably it could help you.
how to use img in vue3
Related
I'm trying to save data with VueJS to a Go backend API.
When I click submit, the data is saved twice. I've tried to prevent this but something is missing.
I've tested the endpoint with Postman and it's saving normally.
Here is the component:
<template>
<div class="row">
<form #submit.prevent="PostDominio">
<hr />
<label id="lbldom">Dominio </label>
<input v-model="form.Titulo" type="text" />
<button
id="sendom"
class="btn btn-outline-primary btn-sm shadow-sm p-1 mb-1"
#click="PostDominio"
>
Gravar
</button>
<hr />
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
form: {
Titulo: '',
},
}
},
methods: {
PostDominio() {
axios
.post('http://localhost:3000/dominios', this.form)
.bind(this)
.catch((error) => {
console.log(error)
})
},
},
}
</script>
I added e.preventDefault to the PostDominio(e) function and it solved my issue!
i am beginner in vue js I want to filter the search based on the checked checkbox, the problem if I check the all checkboxes I don't get a result
<template>
<input type="checkbox" id="fr" value="fruits" v-model="sel">
<label for="fr">fruits</label>
<input type="checkbox" id="leg" value="vegetable" v-model="sel">
<label for="leg">vegetable</label>
<ul v-for="i in ar " :key="i">
<li>{{i.title}}</li>
<li>{{i.category}}</li>
<li>{{i.uri}}</li>
</ul>
</template>
<script>
data(){
return{
sel:[],
tab:[
{title:"aaa",uri:"aaaa.com",category:"fruits",icon:null},
{title:"add",uri:"aaaa.com",category:"vegetable",icon:null},
{title:"aff",uri:"aaaa.com",category:"fruits",icon:null},
{title:"bbb",uri:"bbbb.com",category:"vegetable",icon:null},
{title:"bdd",uri:"bbbb.com",category:"fruits",icon:null}
]
}
},
computed:{
ar(){
return this.tab.filter((item)=>{
return item.category.includes(this.sel)
})
}
}
</script>
this.sel is an array, You want to check if any of the term is in the category using some method:
ar(){
return this.tab.filter((item)=>{
return this.sel.some(term => item.category.includes(term))
})
}
I have a button that should toggle and also call a method. How do I achieve this? Seems like it can be only one or the other.
new Vue({
el: "#app",
data: {
iExist:false,
iDoNotExist: true,
},
methods: {
iSignedUpforThis: function(){
console.log("step X");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-show="iExist"> i EXISTS </p>
<p v-show="iDoNotExist">
<strong> You are not found: </strong>
<form >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
</form>
<BUTTON v-on:click="iExists = iDoNotExist">
TOGGLE MY EXISTENCE
</BUTTON>
</div>
Move
iExists = iDoNotExist to a method:
methods: {
iSignedUpforThis: function(){
this.iExist = this.iDoNotExist
console.log("step X");
}
}
<button v-on:click="iSignedUpForThis">
TOGGLE MY EXISTENCE
</button>
First off to accomplish your desired result you need only one Boolean variable. Then in your method just switch between true and false. Also you have an invalid markup - there is closing tap p but no closing. That's why your example does not work.
Notice: it's bad idea to nest form tag inside p tag, so use div instead. It's considered a good practice to associate your input with it's label using label tag. Also there is shortcut for v-on:click - #click. data should be an function that returns an object, this will prevent . multiple instance to share the same object.
If you follow above recommendations you will make your code much clear and bug-less.
new Vue({
el: '#app',
data: {
isExist: false,
},
methods: {
method() {
this.isExist = !this.isExist
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-show="isExist">I exist</div>
<div v-show="!isExist">
<strong>You are not found:</strong>
<form>
<label>First name:<br>
<input type="text" name="firstname" value="Mickey">
</label>
<br>
<label>Last name:<br>
<input type="text" name="lastname" value="Mouse">
</label>
</form>
</div>
<button #click="method">Toggle</button>
</div>
It might be late but I am sure it will help others. Create a component ToggleButton.js and paste the below codes.
<template>
<label for="toggle_button">
<span v-if="isActive" class="toggle__label">On</span>
<span v-if="! isActive" class="toggle__label">Off</span>
<input type="checkbox" id="toggle_button" v-model="checkedValue">
<span class="toggle__switch"></span>
</label>
</template>
<script>
export default {
data() {
return {
currentState: false
}
},
computed: {
isActive() {
return this.currentState;
},
checkedValue: {
get() {
return this.defaultState
},
set(newValue) {
this.currentState = newValue;
}
}
}
}
</script>
Take a look at the article to learn more https://webomnizz.com/create-toggle-switch-button-with-vue-js/
I have a overview page where people can see there results. They have an option to change that value by clicking on the edit button. By clicking on the edit button you will be navigated to an other page where you can change the value. If you changed the value you will come back to the overview page.
But my problem is the props I pass with this.$navigateBack() aren't changed in the overview page.
Overview page
<template>
<Page class="confirmPage" actionBarHidden="true">
<StackLayout>
<Button class="back fas btn btn-db" :text="'\uf060 Route Details' | unescape" #tap="$navigateBack"></Button>
<GridLayout columns="2*, 2*, 1*" rows="*, *, *" class="routeDetails">
<Label row="0" col="0" class="centerIt" text="Ziekenhuis"></Label>
<Label row="0" col="1" :text="$props.hospital"></Label>
<Label row="0" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" #tap="onEditHospital"></Label>
<Label row="1" col="0" class="centerIt" text="Startpunt"></Label>
<Label row="1" col="1" :text="$props.startpoint"></Label>
<Label row="1" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" #tap="onEditStartpoint"></Label>
<Label row="2" col="0" class="centerIt" text="Bestemming"></Label>
<Label row="2" col="1" :text="$props.endpoint"></Label>
<Label row="2" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" #tap="onEditEndpoint"></Label>
</GridLayout>
<Button class="confirm btn btn-b-db btn-r btn-t-w" #tap="log" text="BEVESTIG"></Button>
</StackLayout>
</Page>
</template>
Script for the overview page
<script>
import editChooseHospital from "../Edit/EditChooseHospital/EditChooseHospital";
import editChooseStartpoint from "../Edit/EditChooseStartpoint/EditChooseStartpoint";
import editChooseEndpoint from "../Edit/EditChooseEndpoint/EditChooseEndpoint";
export default {
props: ['hospital', 'startpoint', 'endpoint'],
methods: {
log : function (args){
console.log(this.endpoint,this.hospital,this.startpoint);
},
onEditHospital: function (args) {
this.$navigateTo(editChooseHospital, {
props: {
startpoint: this.startpoint,
endpoint: this.endpoint
}
})
},
}
}
</script>
Edit page
<template>
<Page class="manualInputPage" actionBarHidden="true">
<FlexBoxLayout class="layout">
<Button class="back fas btn btn-lb" :text="'\uf060' | unescape" #tap="$navigateBack"></Button>
<SearchBar class="searchbar" :text="searchValue" hint="Search" textFieldBackgroundColor="white" #textChange="onTextChanged" #submit="onSubmit"></SearchBar>
<ListView class="list-group" for="items in hospitals" #itemTap="onItemTap" separatorColor="transparent">
<v-template>
<Label class="item" :text="items.name"></Label>
</v-template>
</ListView>
<Label class="bottom-info"></Label>
</FlexBoxLayout>
</Page>
</template>
Script for the edit page
<script>
export default {
props: ['startpoint', 'endpoint'],
methods: {
onItemTap: function (args) {
console.log(this.hospitals[args.index].name);
this.searchValue = this.hospitals[args.index].name;
},
onTextChanged: function (args) {
},
onSubmit: function (args) {
console.log(this.searchValue, this.startpoint, this.endpoint);
this.$navigateBack({
props: {
hospital: this.searchValue,
startpoint: this.startpoint,
endpoint: this.endpoint
}
})
}
}
}
</script>
I don't know if it is possible the docs about this.$navigateBack() aren't very clear to me you can pass options in the function. But what are those options?
Demo
https://play.nativescript.org/?template=play-vue&id=5OsNCC&v=2
Solution thanks to Manoj
https://play.nativescript.org/?template=play-vue&id=5OsNCC&v=3
props are not supported in back navigation, the component already exists. There are other options you could try,
Pass an object in props when calling $navigatingTo. As objects are passed by reference, it should update the actual source as you perform changes in new component, for example.
Use event bus
Vuex also works
I want some thing like this,
If I hit "Add Another" button another set of input boxes should render below this set and this set's "Add Another" button should change to the "Remove This School" and the maximum number of input rows should limited to the 5.
I hope you understand my requirement.What I want is that the user can enter 5 schools or less than 5 schools.If he accidentally add some wrong information he should have a remove button to remove that record.How do I achieve this using Vue JS.
This is my code.
<template>
<div id="app">
<p>Please enter the schools you attained (Maximum five)</p>
School Name : <input type="text" name="" value="">
Location : <input type="text" name="" value="">
<button type="button" name="button" #click="addAnotherInputBox">Add Another</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
counter:0
}
},
methods:{
addAnotherInputBox(){
}
}
}
</script>
Here you go, although you should have filled the logic of your add button, but you can do that by your own
Here is a working fiddle: https://jsfiddle.net/Sletheren/Lo7t0myL/
<template>
<div id="app">
<p>Please enter the schools you attained (Maximum five)</p>
School Name : <input v-model="name" type="text" name="" value="">
Location : <input v-model="location" type="text" name="" value="">
<button type="button" name="button" #click="addAnotherInputBox">Add Another</button>
<ul class="schools">
<li v-for="school in schools">
{{school.name}} <button #click="removeSchool(school)">remove</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
counter:0,
name: '',
location:'',
schools: []
}
},
methods:{
addAnotherInputBox(){
// your logic here...
if(this.counter>4){
alert('you should delete one first! only 5 allowed')
}else{
const school = {
name: this.name, //name here
location: this.location //location here
}
this.counter++;
this.schools.push(school)
this.name='';
this.location=''
}
},
removeSchool(school) {
this.schools.splice(this.schools.indexOf(school),1);
this.counter--;
}
}
}
</script>