Javascript 通过使用Vue.js+；单击列表中的另一项来更改另一个div中的文本；打字稿

仍然掌握Vue的窍门，所以请原谅我在这里缺乏知识。我当前正在尝试更改另一个div的文本，以匹配我在列表中选择的项。下面是一个代码箱以及我目前拥有的代码

密码箱：

{{item.car}}您的第一个
item.car
在for循环之外，因此无法访问该项

将第一个
项.car
更改为
selectedItem.car

在组件上添加
数据
功能：

数据（）{
返回{
selectedItem:{car:'}
}
}

现在将
addItem
函数更改为：

addItem（项目）{
this.selectedItem=项目
}

基本上，我们将所选项目分配给组件数据属性，该属性是被动的，可由您的第一个div访问

请注意，上面的代码不是TS代码，但您会明白这一点。
尝试添加
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>


{{currentItem.car}
俯冲
{{item.car}
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
导出默认类下拉列表扩展Vue{
public currentItem:any=null
公共汽车：任何[]=[
{id:2，car:“GZ”，configs:null}，
{id:3，car:AB，configs:null}，
{id:5，car:C4，configs:null}，
{id:1，car:“PA”，configs:null}，
];
公共附加项（项）：无效{
this.currentItem=item
}
}
Keep get“TypeError:无法读取null”back的属性“car”
尝试将
v-if=“currentItem”
添加到
v-btn
我更新了我的答案，但您还应该添加自定义类型是这在我们使用javascript版本时有效
<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>