receiving a response within an HTML tag using Vue.js

Could someone assist me with retrieving data in an HTML tag similar to how I can do it with console.log? I am trying to get the value

console.log(this.likeDes[0].like_dislike)
to display within a
<span class="fa fa-heart-o"></span>

Answer №1

const website = new Vue({
  el: "#site",
  data: {
    clicks: 10
  }
})

// Feel free to change the number 10 to match the actual click count.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">

<div id = "site">
  <i class="fa fa-mouse-pointer"> {{clicks}}</i>
</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

Best practices for effectively managing a sizable dataset in Vue.js

My task at hand is to create a visualization dashboard that can operate solely in the browser, utilizing Vue.js, D3, and JavaScript. The dataset I am working with is stored in a .json file that is 48 MB in size. However, upon parsing the file using d3.json ...

Transforming a jQuery menu into an active selection with Vue JS

I am looking to transition away from using jQuery and instead utilize Vue for the front end of a menu. Specifically, I need to add an active class and a 'menu-open' state to the appropriate nested list items, similar to what is achieved in the pr ...

Encountering an issue while attempting to integrate mongoose with vue and receiving an error

Whenever I attempt to import this code, the page throws an error: Uncaught TypeError: Cannot read properties of undefined (reading 'split') import { User } from '@/assets/schemas' export default { name: 'HomeView', mount ...

Ensuring the validation of multiple ValidationObservers in Vue

In my ChangeInfo screen, I have three components representing ValidationObservers. When all three are valid, I set the variable showModal = true to display a success notification modal. However, if any of the three components have an error, showModal remai ...

Flask Blueprints cannot overwrite the static path

I am attempting to utilize Flask Blueprints for serving a multipage web application. Webapp structure: Landing page html->login->Vuejs SPA Flask structure: app/ client/ dist/ static/ js/ css/ ...

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

I am facing an issue with my Vue components 'Parent' and 'Child'. Each child component has a checkbox with a :checked prop. In the Parent component, I iterate through an array of objects and pass props to the child. Although I can emit ...

What causes the error message "Request payer account number does not match session" to appear when utilizing the PayPal smart button with multiple recipients?

Can I use login information or smart buttons to pay multiple payees? I attempted the following: paypal.Buttons({ createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ reference ...

Angular version 9.1 includes a myriad of functioning routes, with the exception of just one

UPDATE: The issue was not related to the API, but rather with Angular. Please refer to the answer provided below for more details. I have been using this particular App for years without any route-related problems until recently. After deploying some upda ...

When attempting to add validation to the datepicker component in Vue.js, the default behavior displays an error message automatically

//I have integrated a datepicker component into my HTML code and I would like to add validation that shows an error message when the user moves away from this field and onto another input field in the form <datepicker v-model="present_complaint.experie ...

How can I arrange a specific array position in Vuejs according to the Id value?

<div v-for="(item, index) in gr" :key="space.id" class="val-name"> </div> After making a few modifications to the API call logic, I was able to achieve my desired outcome. However, the issue lies in the fact that ...

Vue component does not inherit scoped CSS

One issue I encountered involves a scoped style tag in my Vue component: <style scoped> .ttt{ background-color: red; } </style> After building the project with npm and webpack, the styles were not being copied over. To address ...

How can I create an inline form in Vue using Element UI with a select dropdown and submit button?

I am currently utilizing the Element library in vue () and I am looking to create a basic form with a select box and a submit button. However, I am unable to find any instructions on how to achieve this on the website. What I want is a format similar to t ...

Passport, Solution for Renewing Expired Tokens

Currently, I am utilizing Laravel version 5.8, VueJS, and Passport version 7.4 for handling Authentication in my project. Below you can find the code snippet for my login function: public function login(Request $request) { $validator = Valid ...

Utilize ES6 lodash to map the keys of an object fetched from an API

Currently, I am utilizing Vue 3 to send POST data to my API. The structure of the objects is as follows: const externalResults: ref(null) const resource = ref({ id: null, name: null, state: {} }) Prior to sending the data to the API, I am modifying ...

Customize the appearance of the Vue.js datepicker starting from today's date

I am currently using the vue-datepicker component to display a date input field in my form. I want to set the default date to the current day and disable the selection of past dates. Additionally, I need to change the language of the component but it seems ...

Dynamic routing with Vue

Currently in the process of developing an application and encountering an issue with my code pertaining to dynamic routing. Utilizing Firebase to fetch data for the app, each department in the database should generate a navbar. Upon clicking on a specific ...

Unable to integrate npm package into Nuxt.js, encountering issues with [vue-star-rating] plugin

Just starting with nuxt js and running into issues when trying to add npm packages. Below are my attempts. star-raing.js import Vue from 'vue' import StarsRatings from 'vue-star-rating' Vue.use(StarsRatings) nuxt.config.js plugi ...

Issue with Axios Response Interceptor on Vuejs causing failure to pass response data

axios.interceptors.response.use( (response) => { return response }, async (error) => { const instance = axios.create({ baseURL: 'myrestbase', timeout: 1000, headers: { 'Authorization': 'Bearer T ...

Just initiate an API request when the data in the Vuex store is outdated or missing

Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action... mounted: function () { this.$store.dispatch({ type: 'LOAD_LOCATION', id: thi ...

Exploring the integration of methods in Vue.js components

Within my Vuejs project, I developed a new form component and integrated it into the main index component. This new component needs to validate certain fields, with validation methods already created in the parent component. However, I am facing difficulti ...