Nano Hash - криптовалюты, майнинг, программирование

Измените текст в другом div, щелкнув другой элемент в списке, используя Vue.js + typescript

Все еще овладеваю Vue, так что простите за незнание. В настоящее время я пытаюсь изменить текст другого div, чтобы он соответствовал элементу, который я выбрал в моем списке. Ниже находится ящик с кодами, а также то, что у меня сейчас есть.

Codesanbox: https://codesandbox.io/s/vuetify-ts-mod-forked-5fbvd

<template>
  <div>
    <v-menu bottom left>
      <template v-slot:activator="{ on }">
        <v-btn text class="align-self-center mr-4" v-on="on">
          {{ item.car }} <----this is failing, should match the item I selected in the menu
          <v-icon small class="pl-3">fa-caret-down</v-icon>
        </v-btn>
      </template>

      <v-list class="lighten-3">
        <v-list-item
          v-for="(item, index) in cars"
          :key="index"
          @click="addItem(item)"
        >
          {{ item.car }}
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Dropdown extends Vue {
  public cars: any[] = [
    { id: 2, car: "GZ", configs: null },
    { id: 3, car: "AB", configs: null },
    { id: 5, car: "C4", configs: null },
    { id: 1, car: "PA", configs: null },
  ];

  public addItem(item): void {
    console.log("item==========", item);
  }
}
</script>
typescript javascript vue.js vuetify.js vuejs2
06.11.2020

Ответы:


1

Попробуйте добавить свойство currentItem и обновить одно, щелкнув элемент списка внутри метода addItem:

<template>
  <div>
    <v-menu bottom left>
      <template v-slot:activator="{ on }">
        <v-btn v-if="currentItem" text class="align-self-center mr-4" v-on="on">
          {{ currentItem.car }} 
          <v-icon small class="pl-3">fa-caret-down</v-icon>
        </v-btn>
      </template>

      <v-list class="lighten-3">
        <v-list-item
          v-for="(item, index) in cars"
          :key="index"
          @click="addItem(item)"
        >
          {{ item.car }}
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Dropdown extends Vue {
  public currentItem:any=null
  public cars: any[] = [
    { id: 2, car: "GZ", configs: null },
    { id: 3, car: "AB", configs: null },
    { id: 5, car: "C4", configs: null },
    { id: 1, car: "PA", configs: null },
  ];

  public addItem(item): void {
   this.currentItem=item
  }
}
</script>
06.11.2020
  • Продолжайте получать TypeError: не удается прочитать свойство car со значением null. 06.11.2020
  • Попробуйте добавить v-if="currentItem" в v-btn 06.11.2020
  • Я обновил свой ответ, но вы также должны добавить собственный тип 06.11.2020

    • 2

    Ваш первый item.car находится вне цикла for, поэтому вы не можете получить доступ к элементу.

    Измените первый item.car на selectedItem.car.

    Добавьте data функцию в свой компонент:

    data () {
    return {
        selectedItem: { car : '' }
    }
}

    Теперь измените вашу addItem функцию на:

    addItem (item) {
    this.selectedItem = item
}

    Обычно мы назначаем выбранный элемент свойству данных компонента, которое является реактивным и доступно для вашего первого div.

    Обратите внимание, что приведенный выше код не является кодом TS, но вы поймете суть.

    06.11.2020
  • Да, это действительно так, когда мы используем версию javascript 06.11.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..