在Vue应用中使用JSON中的数组替换字符串

nwlls2ji  于 2023-11-20  发布在  其他
关注(0)|答案(1)|浏览(119)

我花了太长时间试图自己解决这个问题,如果这很简单,我不会感到惊讶。
基本上,我从一个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);
}


然而,我不能适应我原来的项目上面的代码。
“我尝试了这么多方法都没有成功,我肯定有一个非常简单的解决方法,我就是找不到。任何帮助都将不胜感激。”

dgsult0t

dgsult0t1#

添加一个方法并在v-for中使用它

<ul>
  <li v-for="subject in splitSubjects(employee.subjects)" :key="subject">
    {{ subject }} 
  </li>
</ul>

字符串
使用

...
methods: { 
  splitSubjects: subjectsStr => subjectsStr.split(',')
}

相关问题