Exploring the Power of Rich Text Component in VueJS

I am trying to implement the Rich Text Component as detailed in the docs:

Here is the HTML code that seems to be causing an error:

  <template v-if="slice.slice_type === 'text'">
    <div>
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

When I reload the page, the correct HTML content shows up initially, but disappears after about 0.5 seconds. The following errors appear in the console:

https://i.sstatic.net/j8127.png

I'm not sure how to resolve these errors, especially the ones in the middle of the stack.

javascriptvue.jsnuxt.jsprismic.io

Answer №1

The issue likely arises from passing an Object without the required names. It's recommended to verify the props before sending them:

  <template v-if="slice.slice_type === 'text'">
    <div v-if="slice.primary && slice.primary.text" >
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

Hopefully, this solution proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

I've designed an 'Album' (React) component to showcase album artwork, name, and release date in a card-like format. This component consists of two divs - one for the photo and the other for text. Each artist's discography displays multi ...

javascriptcssreactjstypescripttailwind-css

The function material.setValues in ThreeJS is not a recognized command

As I delve into learning three.js, I've encountered an issue with THREE.MeshLambertMaterial();. The error message reads: this.setValues is not a function This error originates from the following section in the three.js source code: three.js THRE ...

javascriptthree.js

How can Composite C1 framework be seamlessly integrated with Vue.js or any other JavaScript framework?

I am currently working on a large website project with Composite C1 CMS. I am interested in integrating a modern Javascript framework like Vue.js. One major obstacle I am facing is the requirement to have node.js functioning on the server side in conjunc ...

.netvue.jsc1-cms

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be causing Jest to prevent me from using the node testing environment, especially when they have made changes to it?

I am currently working on testing a React component within Next.js using Jest. Jest made an official announcement regarding the change of default test environment to Node: Due to this update, the default test environment has been switched from "jsd ...

javascriptnode.jsunit-testingjestjsnext.js

Issue with Jquery UI Slider not correctly displaying percentages

Currently experimenting with Jquery UI sliders and things have been going smoothly so far. I am attempting to show updating percentages next to the slider while keeping all sliders linked together. I have tried a few different methods, but with mixed res ...

javascriptjqueryjquery-ui

Is VueJS2 using the computed property/method to modify Vue data?

My form in Vue is almost complete, but I'm facing an issue with an array that seems to be affecting my Vue.data object directly. Here's the situation: In my code, I have a method called getParams() which returns an object containing all the data ...

javascriptarraysvuejs2vue.js

Loading animation vanishes prior to the second ajax request being made

Whenever an ajax call is initiated, I display a loading animation that stops once the ajax call is completed. This works perfectly when there's only one ajax call in a function. However, if there are two ajax calls within the same function, the loadin ...

javascriptjqueryajaxasp.net-mvc

Once the stripe token is generated, proceed to submit the form

Having issues submitting a form using jQuery with the Stripe.js plugin. I need to submit the form after creating a Stripe token. The jQuery validation is working correctly, but I'm getting an error message in the console saying "object is not a functi ...

javascriptphpjqueryformsstripe-payments

Create a PDF document and provide a reply

Recently, I encountered an issue while trying to generate a PDF using KnpSnappyBundle on Symfony. Upon running a route through AJAX, the code executes without errors but fails to produce the PDF file. The objective is to create a PDF in a new tab or wind ...

javascriptphpsymfonyknp-snappy

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

What is causing my requests to appear in the network tab of devtools while utilizing Nuxt.js (SSR)?

Currently, I am using nuxt version 3.11.1 and facing an issue where even though I try to send my server-side requests, I do not see them in the network tab. This is making me question if the requests are being sent correctly. To handle sending requests, I ...

vue.jsnuxt.jsserver-side-rendering

The $geoNear operator must be the initial stage in a pipeline to be valid

When performing an aggregation using nodejs as the server-side language, I encountered the error message $geoNear is only valid as the first stage in a pipeline. This is the Aggregation Object: [ { '$geoNear': { near: [Object], distanceFie ...

javascriptnode.jsdatabasemongodbgeolocation

Strategies for implementing classes in Typescript

I've been working on incorporating more classes into my project, and I recently created an interface and class for a model: export interface IIndexClient { id?: number; name?: string; user_id?: number; location_id?: number; mindbody_id?: nu ...

javascripttypescript

Guide to using Angular $resource to pass query parameter array

My goal is to implement a feature that allows users to be searched based on multiple tags (an array of tags) using the specified structure: GET '/tags/users?tag[]=test&tag[]=sample' I have managed to make this work on my node server and hav ...

javascriptangularjsangular-resource

Steps for Enabling or Disabling a Bootstrap-Select Dropdown based on Radio Button Selection using JavaScript and jQuery

I am facing an issue with implementing two radio buttons and a Bootstrap-select Dropdown. I need to dynamically enable/disable the dropdown based on the selection of the radio buttons using JavaScript. Below is the HTML code snippet: Here is the code snip ...

javascripthtmljquery

extract all elements from an array nested within another array

I am having difficulty extracting data from an array file in PHP. I was able to read it and convert it into a PHP array, but now I want to display the stored information in a table, however, I keep getting incorrect values. How can I retrieve the informat ...

javascriptphphtmlarrays

Struggling to adjust the carousel selector to display images in the center, not off to the left

Encountering an issue with adjusting the carousel selector to showcase images in the center instead of on the left. The slides are functioning correctly, but the showcase item is not aligning properly. Here is a preview, thank you. <script src="htt ...

javascripthtmlcsswordpressslider

Is it appropriate to include a function within a loop?

I'm curious to know if it's considered good practice to call a function inside a loop. Both of the following code snippets produce the same result, but I want to add clarity by using a function. Is this considered good practice? Thank you. Code ...

javascriptjsonnode.js

"Encountering a jQuery issue while trying to extend an object

Encountering errors when using some functions of jQuery 2.0.3 after extending the Object prototype... Check out this example on jsFiddle here Object.prototype.GetHashCode = function() { return 1; }; $(document).on("click", "div", function() { }); After ...

javascriptjquery