Vue中如何将计算属性值传递给按钮@click方法？

嘿，我来帮你搞定这个问题！从你的描述来看，问题大概率出在作用域或者计算属性的定义上，咱们一步步排查：

首先，确认计算属性和v-for的变量名是否冲突 #

你提到用mapGetters(['city'])获取了计算属性，同时在v-for里能正常使用city——这里很可能是命名混淆了：

• 如果你的Getter返回的是城市列表数组，那计算属性应该命名为cities（复数）才合理：

  computed: {
    ...mapGetters(['cities']) // 注意是cities，不是city
  }
  

• 然后在模板的v-for里循环这个数组：

  <div v-for="city in cities" :key="city.id">
    <!-- 这里的city是循环里的单个城市对象，作用域完全正确 -->
    <v-btn @click="deleteCityWithId(city.id)"> Delete </v-btn>
  </div>
  

如果你确实是操作单个城市对象（比如当前选中的城市） #

如果你的city计算属性返回的是单个城市对象（而非数组），那你不需要v-for，直接调用即可，但要确保city不是undefined或null：

<!-- 直接使用计算属性里的city.id -->
<v-btn @click="deleteCityWithId(city.id)"> Delete </v-btn>

这时候可以在组件的created钩子或控制台打印this.city，确认它确实包含id属性。

额外的排查小技巧 #

1. 检查控制台报错：打开浏览器开发者工具的Console面板，看是否有city is undefined这类提示，这能快速定位作用域问题。
2. 直接传递整个对象：如果还是有问题，也可以把整个city对象传给方法，再在方法里取id：

   <v-btn @click="deleteCityWithId(city)"> Delete </v-btn>
   

   对应的方法：

   methods: {
     deleteCityWithId(city) {
       const targetId = city.id
       // 这里写你的删除逻辑，比如调用Vuex的action
       this.$store.dispatch('deleteCity', targetId)
     }
   }
   

试试这些方法，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者Vasyl Savchuk