时间戳

首页 > 解决方案 > 在 VUE 中显示 JSON 字符串数组

javascript - 在 VUE 中显示 JSON 字符串数组

问题描述

我有一个要获取的 JSON 数据，但在前面显示一个数组时遇到问题。

所以目前我得到这个输出：

Id: 1
name: Adam
Factors: ["One","Two"]

我希望它像这样显示：

Id: 1
name: Adam
Factors: One Two

这就是我的 JSON 的样子：

{
 "credits": [
{  
 "id": 1,
 "name": "Adam",
 "Factors" : ["One", "Two", "Three"]
},
{
 "id": 2,
 "name": "Jonas",
 "Factors" : ["One", "Two", "Three"]
}
 ]
}

这是我在 VUE 中的前端代码：

获取数据：

 export default {
name: 'app',
data(){
  return{
    isOpen: false,
    id: '',
    credits: []
  }
},
mounted() {
  this.search()
},
 methods: {
  search() {
    if(this.id!="") {
      axios
              .get(`http://localhost:5041/credits/`, {
                params: {

                  ...this.id && {id: this.id}
                }
              })
              .then(response => {

                this.credits = response.data

              })
    }
  }

我的 div 显示信息：

<div v-show="isOpen">
  <p>Credit ID: {{credits.id}}</p>
  <p>Client: {{credits.name}}</p>
<p>DE Factors: <li>{{credits.Factors}}</li></p>
</div>

那么，如何访问确切帖子的所有数组元素？这就是我要展示的内容： Factors: ["One","Two"] 这就是我想要展示的内容： Factors : One Two

标签： javascripthtmlvue.js

解决方案

您可以使用Array.join()

<div v-show="isOpen">
  <p>Credit ID: {{ credits.id }}</p>
  <p>Client: {{ credits.name }}</p>
<p>DE Factors: {{ credits.Factors.join(' ') }}</p>
</div>

推荐阅读