Utilizing Vue.js to display raw HTML content in elements.io table

I am trying to display HTML data in a table using Vue.js.

new Vue({
      el: "#app",
      data: {
        todos: [
          { text: "<p>Learn JavaScript</p>", done: false },
          { text: "<p>Learn Vue</p>", done: false },
          { text: "<p>Play around in JSFiddle</p>", done: true },
          { text: "<p>Build something awesome</p>", done: true }
        ]
      },
    })
    

Here is my template:

<div id="app">
      <el-table :data="this.todos">
        <el-table-column prop="text"></el-table-column>
      </el-table>
    </div>
    

The issue I am facing is that the HTML entities are being printed as plain text, rather than rendered HTML. How can I display them correctly?

Answer №1

I discovered it using a scoped template... Here's how it works...

<div id="app">
  <el-table :data="this.todos">
    <el-table-column prop="text">
      <template scope="scope">
        <span v-html="scope.row.text"/>
      </template>
    </el-table-column>
  </el-table>
</div>

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 send parameters to the jQuery delete button click event handler

Here is the jQuery code I am working with: $('#btnDelete').click( function() {//Do the delete here via jquery post}); In my table, each row has a delete button like this: <a id="btnDelete">Delete</a> I need to pass parameters to t ...

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...

Struggling with NodeJs POST request issue

Let's imagine I have a specific URL https://exampleAPI.com/authorize?param1=value1&param2=value2 Where param1 and param2 are the payload values being sent. How can I execute a POST request in this particular way? I attempted the following: var ...

Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

When it comes to importing functions from lodash, I have been advised by my coworker that it is more efficient to import each function individually rather than as a group. The current method of importing: import {fn1, fn2, fn3} from 'lodash'; ...

What is the best way to refresh a React ES6 component following an AJAX response?

I'm a beginner in React and ES6, trying to create a search field that fetches data as the user types. I want to make an AJAX call using the fetch API when the user types at least 3 characters in the field. When I run the fetch snippet code in the brow ...

Exploring touch interactions using D3.js and TUIO

I'm currently facing a challenge with implementing multi-touch functionality and the d3.slider in my D3 Map. You can see the current state of my project in this video. With the d3 slider, I can spawn points and navigate around the map using touch even ...

issue with scrolling using the ideal scrollbar

Can someone help me figure out how to integrate the 'perfectScrollbar('update')' function with my Angular.js code? $http.get('demo/json/test.json'). success(function(data, status, headers, config) { $scope.items = d ...

Tips for effectively utilizing axios without Vue.js CLI (for instance, in JS Fiddle)

Currently, I am immersing myself in the world of vue.js. To get a better understanding of the dependencies, I have chosen not to utilize the Vue cli just yet, opting for JS Fiddle instead. My next goal is to interact with an API using axios. Here is a glim ...

Bootstrap datepicker not applying datepicker-options as expected

I have been trying to pass all my options in a JSON file according to the instructions on http://angular-ui.github.io/bootstrap/#/top, but unfortunately, I haven't been able to get it to work. I've been experimenting with the Plunkr provided on t ...

Creating an AJAX request using JQuery in a JSP page and sending it to a Spring controller

At the moment, I am in the process of creating two distinct Ajax JQueries to transmit data from a Google Maps JavaScript page (Latitude, Longitude, and Address of the location searched by the user) to my controller class. However, I am encountering differe ...

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

Error: null value cannot be scrolled into view - testing with react, jest, and enzyme

Utilizing react version 16.3.1, jest version 16.3.1, and enzyme version 3.3.0. Inside my React Class component, I have implemented a react ref to ensure that upon mounting the component, the browser scrolls back to the top of the page. class PageView ext ...

Display a placeholder page during the processing of an asynchronous task by Express JS

Perhaps this issue is either too simple to be overlooked or too complex to tackle, but despite my efforts of over 3 hours searching for a solution, I am unable to find one. It seems like it should be a common problem and I am just too inexperienced to loca ...

Firebase is still in the process of loading when DOM begins rendering

On my website, I am pulling data from Firebase to showcase, but even though the text appears correctly, my console keeps throwing errors about undefined variables. This is a crucial issue because my end goal is to implement an editing feature. After some i ...

CORS headers present but AJAX request still fails

A request sent via AJAX from a locally hosted page to a remote server is encountering errors, despite the presence of CORS headers. The JavaScript code for this request is as follows: $.ajax({url: 'http://prox.tum.lt/420663719182/test-upload?Action=S ...

Using Redux with Next.js to implement getStaticPaths

Can someone help me understand how to implement getStaticPaths in conjunction with Redux in Next.js? I'm currently using next-redux-wrapper to manage my content, but I am encountering issues when trying to display the data. Below is a snippet of my ...

What is the appropriate command for "building" a fresh NPM project?

I'm currently working on a JS website with Three.js. I kicked off my project like this: $ npm init $ npm install three Can anyone guide me on where to place my code utilizing Three.js, and which npm command should I use to "compile" my script for dep ...

Obtaining Asynchronous JavaScript responses with Selenium Webdriver

We recently integrated an asynchronous JavaScript call into our website. I am currently working on configuring Selenium Webdriver to pause and wait for a response from this particular call. The event listener code snippet is as follows: $(document).on("a ...

Using jQuery, identify when any of the elements within every function are missing

In my JavaScript file, I have the following code snippet: var aryYears= []; $(".year").each(function(){ aryYears.push($(this).val()); }) This allows me to pass an array of years as a parameter in the saveChanges function. I want to make ...

Is it possible to eliminate auxiliary routes in Angular 4?

Recently, I came across an interesting scenario with two <router-outlet> tags, one with a name property. To test this, I set up the following router mapping: export const routing = [ {path:'', pathMatch:'full', component:E ...