Summer Sale! All accounts are 50% off this week.

vipin93's avatar
Level 13

How can print index value in v-text or v-for?

I'm trying to print value which I'm getting from my api but problem is that I'm getting it only in index format which I do not know how can I print

<template>
  <v-layout column justify-center>
    <v-card class="white--text" text-sm-center style="padding:10px;">
      <h4 class="text-sm-center">
        <div v-if="editing">
          Summary
        </div>
        <div v-else>
          Paste Paragraph
        </div>
    </h4>
      <v-layout row>
        <v-flex xs12>
          <div v-if="editing">
              <p  v-for="(item, index) in items">
              //here how can print response api value in on line 
              </p>
            <v-btn @click="back">back</v-btn>
          </div>
          <div v-else>
            <v-form  ref="form" v-model="valid">
              <v-text-field   v-model="body" name="body" rows="15"
              required textarea dark></v-text-field>
              <v-btn success class="elevation-0" @click="submit">Submit</v-btn>
              <v-btn @click="clear">clear</v-btn>
            </v-form>
          </div>
        </v-flex>
      </v-layout>
    </v-card>
  </v-layout>
</template>

<script>
  import axios from 'axios'
  function getbody (body) {
    var jsonData
    axios({
      method: 'post',
      url: 'http://api.foobar.com',
      data: (body),
      contentType: 'application/json',
      dataType: 'json',
      async: false,
      success: function (data) {
        jsonData = data
      }
    })
    return jsonData
  }
  export default {
    data () {
      return {
        valid: false,
        editing: false,
      }
    },
    methods: {
      submit () {
        var apiResponse = getbody({'body_text': this.body})
        var bodyfinal = apiResponse.bodytexts   ///here i want print bodytexts 
        this.editing = true
        this.body = summaryfinal
        console.log(apiResponse.bodytexts.length)
      },
      clear () {
        this.$refs.form.reset()
      },
      back () {
        this.editing = false
        this.body = ''
      }
    }

  }
</script>

api response I'm getting


  "200": "OK", 
  "bodytexts": [,...]
    [0]:"Word 2008, released on January 15, 2008, included a Ribbon-like feature, called the Elements Gallery, that can be used to select page layouts and insert custom diagrams and images.", 
    [1]:"Word 2011, released in October 2010, replaced the Elements Gallery in favor of a Ribbon user interface that is much more similar to Office for Windows,[40] and includes a full-screen mode that allows users to focus on reading and writing documents, and support for Office Web Apps.", 
    [2]:"[41]"
  


0 likes
5 replies
vipin93's avatar
Level 13

problem is that How can add my response api data in my return

data () {
      return {
        valid: false,
        editing: false,
        apiresonse //here after submit button I want here to add api response bodytexts so that I can use 
      }
    },
hajrovica's avatar

ah sorry i did not understood question - Jeffry has a lesson about axios and data consumption - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

Just short test Vue part

var app = new Vue({
el: '#app',
  data: {
    message: 'Hello Vue!', 
    info: [],



  },
  // methods: {
      
  // },
  mounted(){
    axios.get('/skills').then(response => this.info = response.data);
  },

  
    
})

basically declare property in this case "info" and in mounted function assign data from axios response to info variable you can even assign whole respone to it if you like

Please or to participate in this conversation.