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

Avoiding future clicks with a delay in VUE: A guide

Is there a way to prevent the next click for 600ms after an initial click? I want to temporarily "disable" all a tags for 600ms after one is clicked. Any help would be appreciated. VUE <ul> <li v-for="item in navigation" :key=& ...

Using Cypress fixtures with TypeScript

After transitioning from using Cypress with Javascript specs to Typescript, I encountered a challenge in working with Fixtures. In Javascript, the approach below worked; however, I faced difficulties when switching to Typescript. Fixture JSON file: I sto ...

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

Adding npm packages to your Vue.js application

My Vue app is structured like this (auto created by vue init webpack myProject): index.html components/ -main.js -App.vue I am trying to include npm packages, such as https://github.com/ACollectionOfAtoms/atomic-bohr-model. Following the instructions, I ...

What is the best way to selectively remove Tailwind styles from a single Vue component?

Currently, I find myself in a situation where I need to eliminate the broad impact of the global Tailwind CSS framework from a single specific component. My goal is to uphold a clean and concise HTML document free from unnecessary styling influences. To a ...

AngularJS is causing the D3.js Bubble chart graph to not display properly

I've been attempting to enhance my Bubble chart graph created with D3.js by incorporating AngularJS, but I'm facing some difficulties. Despite going through this tutorial, nothing seems to be working as expected. Below is the code I have written ...

Is it possible to add data in MongoDB without specifying a field name?

I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...

Dragging a div element within a table

I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...

Tips on how to conditionally render a button based on the presence of a link from a separate file in React

I've been working on my personal portfolio site using React and Tailwind. One challenge I'm facing is how to display the "GitHub" button for each project card only when a GitHub link is provided in my data.js file. Currently, I'm utilizing ...

Utilizing the hint operator in strongloop loopback with mongoDB: A step-by-step guide

Seeking guidance on utilizing the hint operator from mongodb within Strongloop Loopback. While I have successfully implemented this operator directly in mongodb, navigating its use within Strongloop Loopback has proven challenging. Any advice on how to int ...

Personalizing Web Push Alerts (Google Chrome)

I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...

Error with JavaScript callback functions

After creating a POST route, I encountered unexpected behavior in the code below. The message variable does not display the expected output. app.post("/", function (req, res, error) { var message = ""; tableSvc.createTable("tableName", function (error ...

What could be causing the tooltip to appear in the wrong position

It may seem like a trivial issue, but I am struggling to get my tooltips to display in the correct position. No matter what I try, they always appear off position. I have searched for solutions and attempted to rearrange the order of scripts, add new scri ...

Check if there are any child nodes before executing the RemoveChild JavaScript function to avoid any errors

function delete(){ let k = document.getElementsByClassName('row'); for(let i=0; i<k.length; i++) { if(k[i].hasChildNodes()){ k[i].removeChild(k[i].childNodes[2]); } } } <div id="table"> <div class="row"& ...

Replicate the action of clicking on the download button in R

Is there a way to programmatically simulate clicking on the download button on the following website using R and download the TSV table? I have looked into methods such as Rselenium and PhantomJS, but they seem to be outdated now. I came across V8 as a po ...

Dealing with PhantomJS: Tackling the Challenge of XMLHttpRequest Exception 101 Error

As a newcomer to JavaScript and PhantomJS, I have been encountering an issue when running myfile.js (which involves for loops) with the command phantomjs myfile.js. It consistently throws the error: NETWORK_ERR: XMLHttpRequest Exception 101: A network err ...

The correct method for concealing components from unauthorized users in Vue

After much thought, I'm considering transitioning my app entirely to Vue frontend. However, there are some concerns on my mind, such as: Currently, in Laravel blade (posts page), I have the following structure: @foreach($posts as $post) <post dat ...

Fade in images using jQuery

I am having issues with fading in and out images using jQuery, it doesn't seem to be working as expected. I think there might be something crucial that I am missing. Take a look at the script below: var count = 1; setInterval(function() { ...

Video playback disabled on hover in Chrome browser

I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...

Why doesn't package.json typically utilize the preset values stored in the .npmrc file?

Windows 10 x64 Based on the information found here, I created a file called C:\Users\bushm\.npmrc with the following content: author = "Andrey Bushman" However, when I run the command npm init -y in a new directory, I noticed that the pac ...