Вывод выбранного элемента

Question

Допустим я нажал на 2-урую кнопку , у меня должно вывестись , что я купил дома с ID : 2. Вопрос заключается в том , что у меня не выводится номер дома , который я выбрал.

new Vue({
   el: '#app',
   data() {
     return {
      houses: [{ID_House:1},{ID_House:2},{ID_House:3},{ID_House:4},{ID_House:5},{ID_House:6}]
     }
   },
   methods: {
     f(){
      alert(`купил дом номер ${ID_House}`)
     }
   }
 });

.wrapper {
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}
.house {
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(20px);
   border-radius: 20px;
   width: 89.096vw;
   height: 28.3103vh;
}

.head {
   height: 8.610vh;
   background: linear-gradient(rgba(41, 146, 254, 0.65));
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   border-radius: 20px 20px 0px 0px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 36px;
   line-height: 44px;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   padding-left: 20px;
}

.main-house {
   display: flex;
   justify-content: space-between;
   padding: 24px;
} 

.block-house {
   width: 10.5vw;
   height: 9.5vh;
   background: linear-gradient(rgba(256, 256, 256, 0.15));
   box-shadow: 0px 4.43649px 4.43649px rgba(0, 0, 0, 0.5);
   border-radius: 10px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   padding: 6px;
   font-size: 13px;
}

.button-house {
   margin-top: 10px;
   border-radius: 10px;
   height: 25px; 
   width: 145px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.04em;
   text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
   color: #FFFFFF;
   background: lightgreen;
   &:active {
      background: linear-gradient(rgba(144, 238, 144, 0.7));
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
  <div class="wrapper">
    <div class="house">
              <div class="head">
                 Дом
              </div>
              <div class="main-house">
                 <div class="block-house" v-for="house in houses">
                    <div class="head-block">id Дома: {{house.ID_House}}</div>
                    <div class="salary">Цена: {{house.Price}}</div>
                    <button class="button-house" @click="f">Купить</button>
                 </div>
              </div>
           </div>
    </div>
 </div>

Answer 1

Bопрос решен , не то передавал )

new Vue({
   el: '#app',
   data() {
     return {
      houses: [{ID_House:1},{ID_House:2},{ID_House:3},{ID_House:4},{ID_House:5},{ID_House:6}]
     }
   },
   methods: {
     fff(value){
      alert(`купил дом номер ${value}`)
     }
   }
 });

.wrapper {
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}
.house {
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(20px);
   border-radius: 20px;
   width: 89.096vw;
   height: 28.3103vh;
}

.head {
   height: 8.610vh;
   background: linear-gradient(rgba(41, 146, 254, 0.65));
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   border-radius: 20px 20px 0px 0px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 36px;
   line-height: 44px;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   padding-left: 20px;
}

.main-house {
   display: flex;
   justify-content: space-between;
   padding: 24px;
} 

.block-house {
   width: 10.5vw;
   height: 9.5vh;
   background: linear-gradient(rgba(256, 256, 256, 0.15));
   box-shadow: 0px 4.43649px 4.43649px rgba(0, 0, 0, 0.5);
   border-radius: 10px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   padding: 6px;
   font-size: 13px;
}

.button-house {
   margin-top: 10px;
   border-radius: 10px;
   height: 25px; 
   width: 145px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.04em;
   text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
   color: #FFFFFF;
   background: lightgreen;
   &:active {
      background: linear-gradient(rgba(144, 238, 144, 0.7));
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="wrapper">
    <div class="house">
              <div class="head">
                 Дом
              </div>
              <div class="main-house">
                 <div class="block-house" v-for="house in houses">
                    <div class="head-block">id Дома: {{house.ID_House}}</div>
                    <div class="salary">Цена: {{house.Price}}</div>
                    <button class="button-house" @click="fff(house.ID_House)">Купить</button>
                 </div>
              </div>
           </div>
    </div>
 </div>

БЛОГ НА HUSL

Вывод выбранного элемента

Ответы (1 шт):