[Vuejs]-Custom dropdown vuex, how to select innertext or innerHTML

by

0👍

You already have the data inside Vue and you’re using it to populate the HTML DOM. Why try to get it back out of the DOM?

Instead, just use the Vue data object:

<template>
...
      <ul
        v-show="selectedJourneyroutes"
        class="dropdown__selected"
        @click="isOpen = true"
        @input="isOpen = true"
      >
        <li v-for="(a, i) in selectedJourneyroutes" :key="i">
          {{ a.routestart }} 
        </li>
      </ul>

      <ul class="dropdown__types" v-if="isOpen">
        <li
          class="dropdown__li"
          v-for="(journeyroute, i) in journeyroutes"
          :key="i"
        >
            <div class="dropdown__route-container" @click="getRoute(i)">
                ...
            </div>
        </li>
      </ul>
...
</template>
<script>
export default {
  ...
  methods: {
    ...

    getRoute(targ) {
        let routeDetails = this.journeyroutes[targ]
        const newJourneyRoutes = [...this.journeyroutes];
        newJourneyRoutes[i, routeDetails]
        this.$store.commit("updateSelectedJourneyRoutes", newJourneyRoutes);
    }
  },

  ...
};
</script>

Or you could pass the entire object back since it’s easily available in the iteration. Either way, it’s already in memory as a computed value as part of the Vue component so just grab that data.

@click="getRoute(journeyroute)

Leave a comment