My data function is like below
data() {
return {
message: ''
}
},
I have method like below
adddress () {
for (let value of Object.values(response.body.errors)) {
this.message += '<li>'+ value +'</li>'
}
},
I am trying to display message like below
<template v-if="message">
<div class="ui red message">
<ul>
{{ message }}
</ul>
</div>
</template>
I am getting output like below
Use raw HTML (v-html):
<template v-if="message">
<div class="ui red message">
<ul v-html="message"></ul>
</div>
</template>
Related
Im using Vue and Ionic, I dont know how to pass my lesson.id to the method openModal()
explanation: I have a card with my data - lesson data, where are also comments, when user clicks on them, modal window is open, I need to pass id of the lesson to my modal window as props, so I can display comments for the lesson.
<ion-content>
<div
class="lesson-card"
v-for="lesson in lesson.video_lessons"
:key="lesson"
>
<div class="lesson-content">
<h2>{{ lesson.content_description }}</h2>
<div class="tags">
<span v-for="tag in lesson.tags" :key="tag">
#{{ tag }}
</span>
</div>
<img
v-if="lesson.content_thumbnail"
:src="`${lesson.content_thumbnail}`"
alt="theme-img"
height="600"
/>
</div>
<div class="sidebar-icons">
bookmark
heart
<p>{{ lesson.likes }}</p>
<a #click="openModal">comments</a>
<p>lesson id: {{ lesson.id }}</p>
</div>
</div>
</ion-content>
this is my method
async openModal() {
const modal = await modalController.create({
component: CommentsModal,
componentProps: { id: 1 }, // i need to replace this 1 with id of the lesson
})
return modal.present()
},
In template, pass it like
<a #click="openModal(lession.id)">comments</a>
and in method
async openModal(payload) { // change added
const modal = await modalController.create({
component: CommentsModal,
componentProps: { id: payload}, // Change added
})
return modal.present()
},
The structure of my code is like this:
So in the Product component, I am making an API call:
<template>
<button class="btn button col-2" #click="addToCart()">
Add to cart
</button>
</template>
<script>
methods:{
addToCart: function () {
let amount = this.itemsCount !== "" ? this.itemsCount : 1;
if(this.variationId != null) {
this.warningMessage = false;
cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => {
this.cartItems = response.data.attributes.items;
});
} else {
this.warningMessage = true;
}
console.log(this.cartItems)
},
}
</script>
And what I am trying to do is the response (this.cartItems) should be shown in Cart component. And my Navbar component:
<template>
<nav class="navbar navbar-expand-lg shadow">
<div class="container navbar-container">
<div class="navbar navbar-profile">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownCart" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-cart-arrow-down"></i>
<span></span>
</button>
<div #click="$event.stopPropagation()">
<CartBox :cartItems="cartItems"/>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
props: {
cartItems:Object
},
components: {CartBox},
}
And CartBox:
<template>
<Cart/>
</template>
<script>
import Cart from '../components/Cart'
export default {
components: {
Cart
}
}
</script>
And my Cart component:
<template>
<div
class="dropdown-menu cart"
aria-labelledby="triggerId"
>
<div class="inner-cart">
<div>
<div class="cart-items">
<div>
<a class="remove">Remove</a>
</div>
</div>
</div>
<hr/>
<div class="cart-items-total">
<span>Total:</span>
Clear Cart
</div>
<hr/>
<router-link :to="{name: 'order'}" class="btn button-secondary">Go To Cart</router-link>
</div>
</div>
</template>
<script>
export default {
computed: {
},
methods: {
}
};
</script>
I am really confused how to pass the props to sibling component and then the child component but if you could pass it to Cart component, that would really help me.
There are two approaches for your request:
1. Using props, provide and inject
This could be accomplished with Provide / inject, after passing your response to a parent. Basically, you will emit your response from your Product component to a parent, maybe like your App.vue as the prop myData, then you provide it for every child, no matter where it is nested, like this:
provide: {
providedData: this.myData
}
In any child you can now use:
inject: ['providedData']
Please note, that this data will only be available if your Product component received it. The second approach is recommended.
2. Using a store
Using a store like vuex is a bit more complex than approach 1, but it will save a lot of time in the future. You would recieve your response in your Product component, dispatch it to the store and could call the state of information from this store anywhere in your app. See further information in this documentation: Vuex | Getting Started
apologies if that's too basic, but I'm stuck.
I have created an object in vue with three properties (slug, title and content). I successfully console.logged the object. How can I now use the object in my page in order to render its content?
There is no need for me to loop through the object, at it has only one item in it.
<template>
<div class="relative py-16 overflow-hidden bg-white">
<div class="relative px-4 sm:px-6 lg:px-8">
<div class="mx-auto text-lg max-w-prose">
<h1>
<span
class="block text-base font-semibold tracking-wide text-center text-indigo-600 uppercase"
>Hello</span
>
<span
class="block mt-2 text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl"
>Here is the name</span
>
</h1>
<p class="mt-8 text-xl leading-8 text-gray-700"></p>
<div
v-bind="this.data.content"
class="text-lg font-medium leading-6 text-gray-900"
></div>
</div>
</div>
</div>
</template>
<script>
const Cosmic = require("cosmicjs");
const api = Cosmic();
const bucket = api.bucket({
slug: "((BUCKETNAME))",
read_key: "((KEY))",
});
const data = bucket
.getObject({
id: "((BUCKET ID))", // Object ID
props: "slug,title,content", // get only what you need
})
.then((data) => {
const about = data.objects;
console.log(data);
});
export default {
name: "data",
data() {
return {
data,
};
},
};
</script>
As other commenters have suggested, it would be useful to read the Vue syntax guide here https://v2.vuejs.org/v2/guide/syntax.html
But to answer your question with the most minimal of code changes, you'd want to move your data request to the lifecycle hook of your vue component.
<template>
<h1>{{ dataObjects.title }}</h1>
<p>{{ dataObjects.slug }}</p>
<p>{{ dataObjects.content }}</p>
</template>
<script>
export default {
name: "data",
data() {
return {
dataObjects: null,
};
},
mounted() {
bucket.getObject({
id: "((BUCKET ID))", // Object ID
props: "slug,title,content", // get only what you need
})
.then((data) => {
// Assign the return value to the dataObjects propery of the vue instance.
this.dataObjects = data;
});
}
};
</script>
In the template section, you can see that I've used curly braces to render the contents of dataObjects (I wasn't sure what structure your data is in).
You can also learn from examples on the Vue Cookbook site
Not too sure what is wrong here, it seems fine to me! I'm simply trying to update the data property display to true when I click the input within my component.
I have passed the data to the slot scope, so can't see that being the issue. It just simply won't update, using a function to toggle it works, however not what I really want to do, seems pointless.
<time-select>
<div slot-scope="{ time }" class="is-inline-block">
<label for="businessHoursTimeFrom"><i class="fas fa-clock"></i> From</label>
<input type="text" name="businessHoursTimeFrom[]" v-model="time" v-on:click="display = true">
</div>
</time-select>
The code behind:
<template>
<div>
<p>{{ display }}</p>
<slot :time="time" :display="display"></slot>
<div class="picker" v-if="display">
<p>Test</p>
</div>
</div>
</template>
<script>
export default {
props: [],
data: function () {
return {
time: '',
display: false
}
},
mounted() {
},
methods: {
}
}
</script>
I have a component on my parent page like so:
Detail.vue
Template:
<feature-list :description="description"></feature-list>
Script:
axios.get(`my/end/point`)
.then(res => {
this.description = res.data.product.description
})
.catch(function (error) {
console.log('error', error)
})
Features.vue
Template:
<component :is="subcomponent" :height="overallHeight" :width="overallWidth" :length="overallLength"></component>
Script:
components: {
subcomponent: {
props: ['overallHeight', 'overallWidth', 'overallLength'],
/* template: this.description */
}
}
Expected return value from this.description:
<el-row :gutter="30">
<el-col :sm="24">
<ul class="dimensions d-flex">
<li class="dimension">
<img src="/length.jpg" alt="">
<h4 class="title">Length</h4>
<p class="base-copy">{{length}}</p>
</li>
<li class="dimension">
<img src="/height.jpg" alt="">
<h4 class="title">Height</h4>
<p class="base-copy">{{height}}</p>
</li>
<li class="dimension">
<img src="/width.jpg" alt="">
<h4 class="title">Width</h4>
<p class="base-copy">{{width}}</p>
</li>
</ul>
</el-col>
</el-row>
How can I send the template to the component? and render the values (lenth, width and height)
Something like this, only difference being, the template comes from an ajax call.
After some digging, I've found a way to solve this, the idea is to pass the template and the props as an object to the is prop.
The code will look like this,
<component
:is="description && { template: `<div>${description}</div>`, props: ['height', 'width', 'length'] }"
:height="overallheight"
:width="overallwidth"
:length="overalllength">
</component>