JSON을 반복하고 Vue.js의 값을 인쇄하십시오.

Vue를 처음 사용하여 API에서 JSON 응답을 검색하고 내 페이지에이 텍스트를 인쇄하려고합니다. 다음은 JSON을 반복하고 Vue.js의 값을 인쇄하십시오.

<body> 
    <div id="mystats" class="container"> 
    <h1>My Top Tracks</h1> 

    <ol> 
     <li v-for="track in tracks">@{{ track.name }}</li> 
    </ol> 
    <pre>@{{ tracks|json }}</pre> 
    <button v-on:click="fetchStats">Fetch stats</button> 
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script> 

    <script type="text/javascript"> 
     $vue = new Vue({ 
      el: '#mystats', 

      data: { 

       tracks: [], 

      }, 

      methods: { 
       fetchStats: function() 
       { 
        this.$http.get('/mystatsdata', {params: {type: 'tracks'}}).then((response) => { 
        this.tracks.push(response.body); 
        console.log(this.tracks.name); 
        }, (response) => { 
        // error callback 
        }); 
       } 
      } 
     }) 
    </script> 
</body>

내가 다시 얻고 응답입니다 :

이

내가 지금까지 무엇을 가지고

<ol> 
    <li v-for="track in tracks">@{{ track.name }}</li> 
</ol>

가되지 않습니다 :

[ 
    [ 
    { 
     "name": "Falling Away - Acoustic (Bonus Track)", 
     "track_number": 8, 
     "type": "track", 
    } 
    ] 
]

문제 것은하는 것입니다 트랙 이름을 출력합니다.

제 콘솔에 오류가 없으므로 Javascript 및 Vue.js에 조금 익숙하지 않아서 어디에서 잘못 될지 잘 모르겠습니다.

어떻게 이름을 표시 할 수 있습니까? 여기에 편집

는 (현재 2에 한함) 둘 이상의 항목에 대한 응답입니다 :

[ [ { "name": "Falling Away - Acoustic (Bonus Track)", "track_number": 8, "type": "track", }, { "name": "Perfect Strangers", "track_number": 1, "type": "track", } ] ]

출처

2016-11-29 James

개체 배열 배열을 받고 있습니다. 두 가지 결과를 어떻게 반환하는지 보여 줄 수 있습니까? –

@craig_h가 작동하는 다른 – James

@craig_h를 추가했지만 2를 반환해야하는 경우에만 하나의 결과 만 반환했습니다. 즉 응답에 두 개의 트랙이 있고 첫 번째 트랙 만 표시됩니다. – James

다시 받고하는 것은 또 다른 배열을 포함하는 배열이라고 응답 -하는 turn은 트랙을 나타내는 실제 객체를 포함합니다.

내부 : <li v-for="track in tracks">@{{ track.name }}</li>, track은 각 개체가 아닌 내부 배열을 나타냅니다.

빨리 해결하려면 코드를 <li v-for="track in tracks[0]">@{{ track.name }}</li> 으로 변경하고 시도해보세요.

그러나 올바른 수정은 결과를 객체의 단일 배열로 반환하기 위해 백엔드를 수정하는 것입니다.

출처

2016-11-29 12:32:53 ecthiender

감사합니다. 트랙 [0] "에서'v-for ="트랙을 사용했습니다. 쿼리하는 Spotify API는 모든 트랙이있는 배열을 반환하고,'this.tracks.push (response.body);를 사용할 때 미리 정의 된 트랙 배열 안에 배치합니다. 이 문제를 해결할 방법이 있습니까? – James

'this.tracks.push (response.body)'를 쓰는 대신에, 응답이 * 트랙 목록이기 때문에'this.tracks = response.body'를 사용하지 않을까요? – ecthiender

매력을 발휘했습니다! 고마워요 – James

@craig_h는 개체 배열 대신 개체 배열을받는 것처럼 보였습니다.

나는이 같은 더 나은 형식의 JSON을 보내 운영자 추천합니다 :

[ 
    { 
    "name": "Falling Away - Acoustic (Bonus Track)", 
    "track_number": 8, 
    "type": "track", 
    }, 
    { 
    "name": "Falling Away2 - Acoustic (Bonus Track)", 
    "track_number": 9 
    "type": "track", 
    } 
]

당신이 백엔드에 액세스 할 수없는 경우, 트릭을해야 당신의 fetchStats 방법에 this.tracks.push(response.body[0])을 사용.

출처

2016-11-29 12:34:03 louiszawadzki

'this.tracks.push (response.body [0]) '를 사용하면 두 번째 결과가 삭제됩니까? – James

'response.body'가 당신이 제공 한 json이라면, 제 응답을'response.body [0]'으로 정확하게 얻어야합니다. 그래서 두 번째 결과가 거기에 있어야합니다;) – louiszawadzki

JSON을 반복하고 Vue.js의 값을 인쇄하십시오.

답변

관련 문제