I'm trying to pass a prop to my inline :style in Vue 3, but for some reason I'm unable to do it. Here's my code. Any help is appreciated.
<template>
<div style="width: 100vw;" :style="{'min-height': props.rem}"></div>
</template>
const props = defineProps({
rem: Number
})
Try to add 'rem' to min-height style prop:
const app = Vue.createApp({
data() {
return {
nr: 10,
};
},
})
app.component('child', {
template: `
<div class="child" style="width: 100vw;" :style="{'min-height': rem+'rem'}"> rem = {{ rem }}</div>
`,
props: {
'rem': {
type: Number,
default: 5
}
},
})
app.mount('#demo')
.child {
background-color: purple;
}
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<child :rem="nr"></child>
</div>
Related
I am trying to display FontAwesomeicon
<font-awesome-icon icon="fa-solid fa-shop" />
with JavaScript array to be dynamic but it's not working it displays as text
<div class="aboutme-card" v-for="(item,index) in servicesArr" :key="index">
<div class="service-card-icon">{{item.icon}}</div> <!--but its display as text not as icon svg-->
<div class="service-card-title">{{item.title}}</div>
<p class="service-card-desc">{{item.description}}</p>
</div>
<script>
export default {
data() {
return {
servicesArr: [
{
icon: `<font-awesome-icon icon="fa-solid fa-shop" />`,
title: "E-commerce",
}
]
}
}
}
</script>
Isn't something like this conceivable in your case?
<template>
<div class="aboutme-card" v-for="item in servicesArr" :key="item.icon">
<div class="service-card-icon">
<font-awesome-icon :icon="item.icon" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
servicesArr: [
{
icon: "fa-solid fa-shop",
title: "E-commerce",
}
]
}
}
}
</script>
Even if v-html exists, it's usually not the way to go.
Especially in such a simple use-case where dynamic props are totally fine.
Overall, I still recommend that solution for overall ease of use + flexibility.
I'm trying to pass different texts to a component list. Each text has a different title and also different content, but the same style. To do this I'm using another component that takes a v-html. I need to pass an image inside this v-html and also several props. However, the image does not appear and the props do not work. How can I solve this? I don't want to change my "message" component because I'm using it in other areas of my website and it's working fine.
App.Vue:
<template>
<div id="app" class="raleway">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<section class="container grid">
<div
v-for="metadata in this.metadatas"
:key="metadata.id"
class="steps-wrapper text"
>
<Team :metadata="metadata"/>
</div>
</section>
</div>
</template>
<script>
import Team from "./components/Team.vue";
export default {
name: "App",
components: {
Team,
},
data() {
return {
metadatas: [
{
id: 1,
name: "Title1",
country: "Brazil"
},
{
id: 2,
name: "Title2",
country: "England"
},
],
};
},
};
</script>
Component (Team):
<template>
<div id="app" class="raleway">
<section>
<div class="steps-wrapper text">
<Step/>
<div class="image-cropper">
<img src="../assets/me.jpg" alt="" class="profile-pic">
</div>
<Message v-html="content" />
</div>
</section>
</div>
</template>
<script>
import Step from "./CreationView";
import Message from "./Message";
export default {
name: "App",
components: {
Step,
Message
},
props: {
metadata: Object,
},
data() {
return {
content:
"<h2>{{metadata.name}}</h2>\
<h2><img src='../assets/discord.svg' alt=''>Head</h2>\
<p id='country'> {{metadata.country}} </p>\
};
},
};
</script>
Component (Message):
<template>
<div class="container">
<section>
</section>
</div>
</template>
<script>
export default {
name: 'Message',
}
</script>
import React from "react";
import "./About.css";
import About_Main from "../components/About_Main";
import About_Data1 from "../components/About_Data1";
import About_Data2 from "../components/About_Data2";
class About extends React.Component {
state = {
main: {
display:"block",
opacity:1
},
data: {
display:"none",
opacity:0
}
};
changeSelect = id => {
if (id === "select1") {
this.setState({
main: {
display:"block",
opacity:1
},
data: {
display:"none",
opacity:0
}});
} else if (id === "select2") {
this.setState({
main: {
display:"none",
opacity:0
},
data: {
display:"block",
opacity:1
}});
}
};
clickHandler = event => {
event.preventDefault();
this.changeSelect(event.target.id);
};
render() {
return (
<div>
<section className="selects">
<div
id="select1"
className="select"
onClick={this.clickHandler}
></div>
<div
id="select2"
className="select"
onClick={this.clickHandler}
></div>
</section>
<section className="about">
<div
className="about_div"
style={{ display: this.state.main.display, opacity: this.state.main.opacity }}
>
<About_Main></About_Main>
</div>
<div
className="about_data"
style={{ display: this.state.data.display, opacity:this.state.data.opacity }}
>
<About_Data1></About_Data1>
<About_Data2></About_Data2>
</div>
</section>
</div>
);
}
}
export default About;
By clicking 2 different buttons, I want to show only one out of two.
Also, I like to give a transition effect so I used opacity. But it is not working!
Is this the only way to set style property using javascript in react?
Can't I use querySelector or something else?
I feel like javascript is much easier than react ðŸ˜ðŸ˜
I'm trying to display a balance from my API and I've set up a component to fetch the value with Axios.
When I try to use this component it doesn't fetch the result.
If I dump the code into a vue file in pages folder the result is fetched.
Any idea why the result isn't rendering in the navbar? or am I not using component correctly?
Here's my code.
component/Balance.vue
<template>
<div class="container">
<span>Balance</span>
<ul class="balance">
<li v-for="bal in balance"
:key="bal.id">
<span>{{ bal.balance }}</span>
<span>{{ bal.exposure }}</span>
<span>{{ bal.free_funds }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data: () => ({ balance: [] }),
async asyncData ({ app }) {
try {
const response = await app.$axios.get('/api/balance/')
return {
balance: response.data.results,
error: false
}
} catch (e) {
console.log('error', e)
return {
balance: [],
error: true
}
}
},
};
</script>
<style>
container {
font-family: ‘Lato’, sans-serif;
font-size: 12px;
font-weight: 400;
padding: 10px;
text-align: left;
width: -20%;
}
</style>
layouts/default.vue
<template>
<div class="mt-2">
<b-navbar toggleable="md" type="dark" variant="info">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav-collapse">
<b-navbar-nav>
<b-nav-item to="/events">Events</b-nav-item>
<b-nav-item to="/monitor">Monitor</b-nav-item>
<b-nav-item to="/configuration">Configuration</b-nav-item>
<b-nav-item to="/comments">Comments</b-nav-item>
<b-nav-item to="/submit">Submit</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto" v-if="$store.state.loggedIn">
<b-nav-text>{{ $store.state.user.username }}</b-nav-text>
<Balance/>
<b-nav-item #click.prevent="logout()">Logout</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto" v-if="!$store.state.loggedIn">
<b-nav-item to="/login">Login</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<div class="mt-2">
<nuxt/>
</div>
</div>
</template>
<script>
import Balance from '~/components/Balance.vue';
export default {
components:{
Balance
},
methods: {
logout () {
this.$store.dispatch('logout')
this.$router.push('/')
}
}
}
</script>
<style>
</style>
You nee to Change your Code a bit. You forgot to return your data
export default {
data: function(){
return{
balance: []
}
},
.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>
//main view
<div>
<story :story="stories[0]"/>
</div>
//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?
This is my component where I have 2 divs with 2 different classes one will be active for mobile and one will be active for web.
<div class="storyMobile">
//code
</div>
<div class="storyWeb">
//code
</div>
//this is my main view where I am importing this component
<div class="body-frame">
<Header></Header>
<section class="content-section-bar" v-if="stories && stories.length">
<div>
<story :story="stories[0]"/>
</div>
</section>
</div>
By default the story component is in web so "storyweb" class is getting applied to it but I want the "storyweb" class to get applied on it.
How should I do it in vue.js I tried using the props but didn't get the desired output.
Is it what you want?
your component:
<div :class="className"></div>
script:
export default {
props: {
className: {
default: 'storyWeb'
}
}
}
usage:
<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>
Vue.component('story',{
template: `<div :class="className">test</div>`,
props: {
className: {
type: String,
default: 'storyWeb'
},
story: {
type: Object,
required: true
}
}
})
var app = new Vue({
el: '#app',
data () {
return {
stories: [
{content: 'sotry1 content'},
{content: 'story2 content'}
]
}
}
})
.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<story :story="stories[0]" class-name="storyMobile"></story>
<story :story="stories[1]"></story>
</div>