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

[wmacklin]

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> 

[s.molinari]

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

Scott

[wmacklin]

@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.