Showing list data from script to template in vue - A step-by-step guide

My task involves displaying data from the main table in MySQL. I need to show the type of each major by comparing it with the id in the faculty table. I have successfully logged this information using console.log, but I'm unsure how to display it on the template. Any suggestions would be appreciated.

Template tag

<td>
{{ inputText }}
</td>

Script tag

data() {
return {
    majors:[],
    faculties:[],
    form: new Form({
        major_id:'',
        major_code:'',
        major_name:'',
        major_faculty:'',
        major_status: '',
    }),
    inputText: '',
  };
},
computed: {
 filterFaculty() {
    for(let i in this.majors) {
        this.faculties.forEach((element) => {
            if(element.faculty_code==this.majors[i].major_faculty) {
                this.inputText=element.faculty_name;
            }else {
                return '-';
            }
        });
     }
  }
},
mounted() {
  this.fetchFaculties();
  this.fetchMajors();
},
methods: {
  fetchFaculties(page_url) {
    let vm = this;
    page_url = '../../api/admin/edu-faculty/faculty/faculty';
    fetch(page_url)
    .then(res => res.json())
    .then(res => {
        this.faculties = res.data;
    })
    .catch(err => console.log(err));
},
fetchMajors(page_url) {
    let vm = this;
    page_url = '../../api/admin/edu-major/major/'+this.currentEntries+'?page='+this.pagination.current_page;
    fetch(page_url)
    .then(res => res.json())
    .then(res => {
        this.majors = res.data;
        this.pagination = res.meta;
    })
    .catch(err => console.log(err));
  },
 }

Answer №1

I have successfully resolved the issue

Code snippet

methods: {
   filterFaculty(major) {
      const faculty = this.faculties.find((fac) => fac.faculty_code === major.major_faculty);
        return faculty.faculty_name;
    },
}

Template snippet

<td>
   {{ filterFaculty(major) }}
 </td>

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

Trigger a Tabulator event when a checkbox is selected in Vue 3

Currently, I am utilizing Vue3 along with Tabulator (5.2.7) to create a data table using the Composition API. In the following code snippets, I have excluded irrelevant parts of the code. //DataTable.vue <script setup> import { TabulatorFull as Tabu ...

Dynamic row additions causing vanishing rows in the table due to JS/jQuery implementation

I am currently facing an issue while trying to create a table where I can add rows dynamically. Despite looking at various solutions on this topic, none of them seem to resolve the problem I am encountering. The newly added rows disappear immediately after ...

There was a rendering error: "Type Error: Unable to access the 'PAY_TYPE' property of null"

I am attempting to retrieve the PAY_TYPE value from the callback_details object by using JSON.parse() function to convert a string into an object. However, I keep encountering an error related to the question's title. Here is my code snippet: <td ...

If the number of items in Vuetify tabs exceeds the limit, they will collapse into a 'more' button

I am working on developing an electron application with a customizable width, allowing users to adjust the size of the app according to their preference. The width of the app should determine how many "items" are visible in the navigation bar. If there a ...

An error occurred in Vuejs: Type Error - _vm.moment is not a recognized function

Encountering a challenge while attempting to migrate to moment on Vuejs. Upon executing npm install vue-moment and adding the following script: <script> const moment = require('vue-moment'); ... </script> I included this in my & ...

JavaScript event triggered when an element is displayed on the page using AJAX

Is it feasible in JavaScript to initiate a function when an element, like a div, becomes visible on the screen? I am working on an infinite grid that expands in both directions, and I want to fetch elements dynamically through AJAX as the user scrolls. A ...

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

It is widely believed that JavaScript operates on a single-threaded model, but it has the ability to run asynchronously. One intriguing aspect is how this single-threaded model manages non-blocking AJAX requests. Consider a scenario where a non-blocking A ...

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

I recently started learning AngularJS and Rails, and I attempted to develop a Rails application incorporating AngularJS. Currently, I am looking to make a POST request to send data and insert it into the database. In the Activity Controller: def create ...

Switching from a right arrow to a down arrow using jQuery for a collapsible accordion feature

I have developed a unique type of toggle feature similar to an accordion design. When I click on the right-arrow next to an item, such as Area A, it expands to reveal the list of items within Area A. The arrow also changes orientation to point downwards (L ...

Is there a universal method to disregard opacity when utilizing jQuery's clone() function across different web browsers?

I've encountered a situation where I need to allow users to submit a new item to a list within a table, and have it smoothly appear at the top of the list. While using DIVs would make this task easier, I am working with tables for now. To achieve thi ...

Working with floating point numbers in Node.js with a zero decimal place

NodeJS interprets float values with a zero after the decimal point as integers, but this behavior occurs at the language level. For example: 5.0 is considered as 5 by NodeJS. In my work with APIs, it's crucial for me to be able to send float values w ...

Showing a 2D array in HTML using ngFor loop

I need to display a list of arrays in an HTML p-table. Here is the array list: [Array(2), Array(2), Array(2), Array(2), Array(1)] 0: (2) ["abc", "def"] 1: (2) ["ghi", "jkl"] 2: (2) ["mno", "pqr"] ...

What is the process for importing Buffer into a Quasar app that is using Vite as the build tool

I'm having issues with integrating the eth-crypto module into my Quasar app that utilizes Vite. The errors I'm encountering are related to the absence of the Buffer object, which is expected since it's typically found in the front end. Is ...

Changing a file object into an image object in AngularJS

Can a file object be converted to an image object? I am in need of the width and height from the file (which is an image). Here is my code: view: <button id="image_file" class="md-button md-raised md-primary" type="file" ngf-select="uploadFile($file ...

Unable to observe modifications in json file within java project (jsp)

I am currently using IntelliJ IDEA to develop a web project with JSP. I retrieve data from a file called "customer.json", and when I click on a button, I update this file in the backend. However, after trying to fetch the updated data again, it still reads ...

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

Is there a way to easily identify the error in my Express application that is preventing my hbs template from running properly?

I am facing an issue with my express code where it is not rendering the data properly. Can someone please assist me in resolving this error? Your help will be greatly appreciated! let express=require('express'); let app=express(); ...

Encountering a React Runtime issue: The element type is invalid, expecting a string for built-in components or a class/function for composite components

Here is a glimpse of my code: import { React, useState, useEffect } from 'react'; import { GoogleMapReact } from 'google-map-react'; import styles from './Location.module.scss'; import pinstyles from './TheMap.module.scss ...

Obtaining Data from an Array with Reactive Forms in Angular 4

Just starting out with Angular 4 and trying to figure out how to populate input fields with information based on the selection made in a dropdown. <select formControlName="selectCar" class="form-field"> <option value="">Choose a car&l ...

Targeting lightgallery.js on dynamically added elements in Javascript: The solution to dynamically add elements to

I am facing a challenge in targeting dynamically added elements to make them work with lightgallery.js. Take a look at the example below: <div id="animated-thumbs" class="page-divs-middle"> <!-- STATIC EXAMPLE --> ...