时间戳

首页 > 解决方案 > 如何在 vue 中将这些数据从 console.log(element.faculty_name) 显示到模板？

javascript - 如何在 vue 中将这些数据从 console.log(element.faculty_name) 显示到模板？

问题描述

我有显示MySQL主表数据的功能。我想通过与下面的教师表的 id 进行比较来显示该专业的类型。我已将其显示在 console.log 上，如何将其显示在模板上？

模板标签

<td>
    {{ filterFaculty }}
</td>

脚本标签

data() {
    return {
        majors:[],
        faculties:[],
        form: new Form({
            major_id:'',
            major_code:'',
            major_name:'',
            major_faculty:'',
            major_status: '',
        }),
    };
},
computed: {
    filterFaculty() {
        for(let i in this.majors) {
            this.faculties.forEach((element) => {
                if(element.faculty_code==this.majors[i].major_faculty) {
                    console.log(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));
    },
 }

标签： javascriptvue.jsvuejs2

解决方案

有不同的方法可以实现这一点，我认为最简单的方法是执行以下操作：

在你的数据中定义一些东西——比如inputText然后将你设置element.faculty_name为这个——如下所示：

data() {
  return {
    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; //Changed here
                }else {
                    return '-';
                }
            });
        }
    }
},

而不是像这样在您的模板中引用它：

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

这应该可以解决您的问题！

推荐阅读