我花了太长时间试图自己解决这个问题,如果这很简单,我不会感到惊讶。
基本上,我从一个API接收JSON。然后,这个数据将在Vue组件中使用,以动态地用内容填充html。
我遇到的问题是JSON中的一些信息必须以数组的形式存在,这样我才能用Vue“v-if”来覆盖它,但是我从API接收到的信息是字符串。
我现在收到:“subjects”:“English,Biology”。但是我需要它是:“subjects”:[“English”,“Biology”]
下面是我当前的代码:
JSON示例:
{
"employees": [
{
"id": 7099,
"first_name": "Angela",
"subjects": "English,Biology",
},
{
"id": 7100,
"first_name": "Aeliana",
"subjects": "English,French",
}
]
}
字符串
Vue组件要素:
<template>
<div v-for="employee in employees" :key="employee.id">
<p>
{{ employee.first_name }}
</p>
<p>
{{ employee.subjects }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
employees: []
}
},
mounted() {
fetch('http://localhost:3000/employees')
.then(res => res.json())
.then(data => this.employees = data)
.catch(err => console.log(err.message))
}
}
</script>
型
目前,我的代码使用v-if,名称和主题出现在html中。问题是,“subjects”一起出现作为一个字符串。我需要它在一个数组中,这样我就可以使用另一个v-if将每个主题放在一个单独的元素中。
在思考了这个问题和阅读之后,我做了这个简单的代码,它完成了类似的事情:
const employees = [{'name':'john','subjects':'maths,science'},{'name':"mark",'subjects':'english,maths'}];
for (employee of employees) {
employee.subjects = employee.subjects.split(',')
console.log(employee.subjects);
}
型
然而,我不能适应我原来的项目上面的代码。
“我尝试了这么多方法都没有成功,我肯定有一个非常简单的解决方法,我就是找不到。任何帮助都将不胜感激。”
1条答案
按热度按时间dgsult0t1#
添加一个方法并在v-for中使用它
字符串
使用
型