How can I stop my data from looping when I call axios with a single id?



  • This my script calling axios and a single id

    <script>
    export default {
      data () {
        return {
          bid: []
        }
      },
      mounted () {
        this.getBid()
      },
      methods: {
        getBid () {
          var bidId = this.$route.params.id
          this.$axios.get(`http://localhost:3000/bids/${bidId}`)
            .then((response) => {
              console.log(response)
    
              this.bid = response.data
              console.log(this.bid)
            })
            .catch((error) => {
              console.log(error)
            })
        }
      }
    }
    </script>
    

    This my component to display the data. It displays several times despite their is only one item in the data.

        <div
          v-for="bi in bid"
          :key="bi"
        >
          <div class="row bg-secondary lt-sm">
            <q-toolbar>
              <q-toolbar-title class="text-caption">
                {{bid.businessName}} <span class="text-grey">/</span>
                {{bid.bidname}}
              </q-toolbar-title>
              <q-btn
                flat
                class="float-right"
                color="primary"
                @click="$router.push('/editbiddetails')"
              >
                <q-icon color="accent" name="edit" style="font-size: 1.2em;"/>
                <div>Edit</div>
              </q-btn>
            </q-toolbar>
          </div>
        </div> 
    


  • Your looping (the v-for) in your component. Get rid of that and you won’t have it showing multiple times.

    Scott



  • @s-molinari Thanks. That was the problem. The strangest thing was that I did that and saw no result. I may have not refreshed the screen or something.


Log in to reply