自定义下拉vuex，如何选择innertext或innerHTML

如何解决自定义下拉vuex，如何选择innertext或innerHTML

我正在开发一个 ui 组件，其中的值来自商店。我正在尝试获取下拉列表中的列表项 @click="getRoute(i,$event.target.innerHTML)

要出现在页面上，到目前为止，点击事件的目标是所有 routestart 而不是

被点击的那个

非常感谢任何帮助，我知道我在这里错过了一个技巧，也感谢人们之前提供的所有帮助

<template>
  <div class="dropdown" id="passenger-type">
    <div class="dropdown__decoration">
      <label class="dropdown__label">Route</label>
      <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,$event.target.innerHTML)">
                <div class="dropdown__route-detail">
                    <span>{{ journeyroute.route }}</span>
                </div>
                <div class="dropdown__route-detail">
                    <span>{{ journeyroute.routestart }}</span>
                </div>
                <div class="dropdown__route-detail">
                    <span>{{ journeyroute.routeend }}</span>
                </div>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },computed: {
    journeyroutes: {
      get() {
        return this.$store.state.journeyroutes;
      },set(value) {
        this.$store.commit("selectedjourneyroute",value);
      }
    },selectedjourneyroutes: {
      get() {
        return this.$store.state.selectedjourneyroute;
      },},methods: {
    onChange() {
      this.isOpen = !this.isOpen;
    },handleClickOutside(evt) {
      if (!this.$el.contains(evt.target)) {
        this.isOpen = false;
      }
    },getRoute(i,innerHTML) {
        const newjourneyRoutes = [...this.journeyroutes];
        newjourneyRoutes[i,innerHTML]
        this.$store.commit("updateSelectedjourneyRoutes",newjourneyRoutes);
    }
  },mounted() {
    document.addEventListener("click",this.handleClickOutside);
  },destroyed() {
    document.removeEventListener("click",this.handleClickOutside);
  }
};
</script>

解决方法

您已经在 Vue 中拥有数据，并且您正在使用它来填充 HTML DOM。为什么要尝试将其从 DOM 中取出？

相反，只需使用 Vue 数据对象：

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

或者您可以将整个对象传回，因为它在迭代中很容易获得。无论哪种方式，它都已经作为 Vue 组件的一部分作为计算值存在于内存中，因此只需获取该数据即可。

@click="getRoute(journeyroute)