How to render the content of an object in vue? - vue.js

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

Related

Vue3, Render parent div only if slot inside of it has content

I'm trying to render a header only if there's a text or a populated slot inside of it.
I tried:
<div
class="flex py-sm px-md w-full align-middle rounded-t-xl"
v-if="props.title || $slots.header"
:class="[`bg-${props.headerColor}`]"
>
<p class="text-bo-xl font-bold" :class="`text-${props.titleTextColor}`">
{{ props.title }}
</p>
<slot name="header"></slot>
</div>
But the div renders anyway, even if the slot is empty. I think it considers the slot present even if it's not populated.
Any ideas?
sorry for the late response. If I utilize computed() it seems to work:
<template>
<section>
<h4>lorem</h4>
<div v-if="hasHeaderSlot">
<h2>ipsum</h2>
<slot name="header"></slot>
</div>
</section>
</template>
<script>
import { computed } from 'vue';
export default {
setup(_, { slots }) {
const hasHeaderSlot = computed(() => slots.header && slots.header());
return {
hasHeaderSlot,
};
},
};
</script>
I hope this helps. With best regards

How to pass id to modal window component

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()
},

VueJS: dynamic component loses it`s props after reloading

I have a django rest_framework as a server and vuejs for a client side. There is an index page like '/' where i`m using v-for to iterate an array of objects to show some item's cards. Each card has a button to the '/info'(which is dynamically changed with /:slug in a router) like so:
...
<RouterLink :to="{name: 'contentItemInfo', params: {item: item, slug: item.slug} }">
<button class="card-button btn fade-in">
...
</button>
</RouterLink>
...
Then, when we press the button, we are going to '/:slug' and passing the item param to props, using it like so:
...
<video class="video" type="video/mp4" autoplay loop :src="item.trailer"/>
<h3 class="video-info-h3 px-5 py-1 rounded">{{ item.title }}</h3>
<h5 class="video-info-h5 px-5 py-1 rounded">{{ item.subtitle }}</h5>
<p class="video-info-p px-5 py-1 text-wrap rounded">{{ item.description }}</p>
...
export default {
name: "ContentItemInfo",
components: {Footer, Navbar},
props: [
'item'
],
}
Works for now, but when i reload the page, all the content disappeare and got undefined of all item`s values
How should i make it work after reloading?
Passing complex objects by route param only works in-memory. Once you reload the page, the only data you have is strings from the URL. You'll have to load the item data from your backend for fresh page loads.
Try something like this, making the item prop optional and loading the data if it's not set
export default {
name: "ContentItemInfo",
components: {Footer, Navbar},
props: {
item: {
type: Object,
default: null
},
slug: String // set from the route param
}
data: vm => ({
video: vm.item // initialise a local copy so you can update it if required
}),
async created () {
if (this.video === null) {
// just guessing with this bit
const { data } = await axios.get(`/api/video-for-slug/${encodeURIComponent(this.slug)}`)
this.video = data
}
}
}
and your template
<div v-if="video">
<video
class="video"
type="video/mp4"
autoplay
loop
:src="video.trailer"
/>
<h3 class="video-info-h3 px-5 py-1 rounded">{{ video.title }}</h3>
<h5 class="video-info-h5 px-5 py-1 rounded">{{ video.subtitle }}</h5>
<p class="video-info-p px-5 py-1 text-wrap rounded">{{ video.description }}</p>
</div>
<p v-else>Loading...</p>
In the above, I assumed that your routes are passing params as props. If not, see https://router.vuejs.org/guide/essentials/passing-props.html

How can I access text inside an input within a template?

My objective is to get text from an input that's in a template. Not sure how to go about retrieving this. I'm using Vue; Note must be available in Vue.js, no external sources
The Template:
<template id="addmodal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Enter Course Information:
</slot>
</div>
<div class="modal-body">
<slot name="body">
Course Name
<input type="text" ref="coursename" placeholder="Numbers Don't Lie 101">
Course Grade
<input type="text" ref ="coursemark" placeholder="100">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" #click="confirmCourse">
Submit New Course
</button>
<button class="modal-cancel-button" #click="cancelCourse">
Cancel
</button>
</slot>
</div>
</div>
</div>
</div>
</template>
I need to access coursename and coursemark. This can be done fairly easily when not inside a template. As it is right now the code executes stating .value is undefined.
var app = new Vue({
el: "#app",
data: {
courses: [],
confirmModal: false,
confirmAdd: false,
selectedCourse: null
},
methods: {
addCourse2: function addCourse2() {
this.confirmAdd = false;
var course = this.$refs.coursename.value;
var mark = this.$refs.coursemark.value;
if (course) {
this.courses.push(new Course(course, mark));
this.$refs.newcourse.value = "";
this.$refs.newmark.value = "";
}
}
}
});
EDIT:
Forgot to add the component section
Vue.component("add-modal", {
template: "#addmodal",
props: ["open", "course", "mark"],
methods: {
confirmCourse: function confirmCourse() {
alert(this.$refs.coursename.value);
this.$emit("confirm");// GET
},
cancelCourse: function cancelCourse() {
this.$emit("cancel");
}
}
});
Forgive me in advance, I feel this is something rather easy I'm missing as a beginner
use v-model. or if it is in other component. you can use $emit

Update component data from the template

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>