Javascript 更新按钮上的值：单击事件vue js

我试图在我的网站上更新每个温度和城市的名称，为此，我使用了一个功能，可以在点击按钮时工作，温度更新工作正常，但当我在下拉列表选择城市时，我的城市名称会更新，但我不想这样，我想在点击按钮后更新它

有一个html模板：

<template>
  <div class=location>
  <select  id="select" v-model="city">
     <option value="" selected disabled>Choisissez</option>
     <option v-for="city in cities" :value="city" :key="city.id">{{city.name}}</option>
     <button @click="refreshCityTemperature"  type="button"> Search </button>
  </select>
  </div class=location>
  <div class="meteo">
        <h1 id="MeteoActuelle"> Météo actuelle à {{city.name}} </h1>
        <p> Temperature : {{ temp }} °c </p>
  </div class="meteo">      
</template>

the js code : 

export default {
  name: 'Meteo',
  data() { 
    return {
      temp: Math.floor(Math.random() * (30 - 10) ) + 10,
      today: moment().format('Do MMMM  YYYY'),
      city: {},
      cities: [
            {
                id: "PAR", name: "Paris"
            },
            {
                id: "MAR", name: "Marseille"
            },
            {
                id: "LYO", name: "Lyon"
            }            
      ]  
    }
  },
  mounted() {
    this.city = this.cities[0];
  },
  methods: {
      refreshCityTemperature(){
            this.cities = city.name;
            this.temp=Math.floor(Math.random() * (30 - 10) ) + 10;
    }
  }
}

舒瓦西塞
{{city.name}
搜寻
Météo actuelle{{city.name}
温度：{{temp}}}摄氏度

js代码：
导出默认值{
名称：“Meteo”，
数据（）{
返回{
温度：数学地板（数学随机（）*（30-10））+10，
今天：矩（）.format（'Do MMMM YYYY'），
城市：{}，
城市：[
{
id：“PAR”，名称：“巴黎”
},
{
身份证：“MAR”，姓名：“马赛”
},
{
id:“LYO”，姓名：“Lyon”
}            
]  
}
},
安装的（）{
this.city=this.cities[0]；
},
方法：{
刷新城市温度（）{
this.cities=city.name；
this.temp=Math.floor（Math.random（）*（30-10））+10；
}
}
}

---

你知道怎么做吗？我是vue js的新手，你正在用

city.name

覆盖cities数组，它是string类型，你为什么要这样做？因为我想在单击按钮时显示下拉列表中选择的城市名称，我认为这是个好主意，显然不是，moove是什么@Boussadjrahim您想只在单击按钮时更新城市和温度吗@完全正确@BSYoannTry out

this.cities=[this.city]