VueJS/jquery 通过单击按钮从 P 标签获取值

Question

单击按钮时，我需要获取商品价格。这是我目前的代码：

   <div id="shop" class="row" v-cloak>
    {{#each items}}
        <img src="{{img}}">
        <p>{{title}}</p>
        <p class="price">{{price}}</p><br>
        <button class="btn btn-danger" @click="buyItem">Buy</button>
    {{/each}}
   </div>

JS：

    methods: {
        buyItem: function(event){    
            console.log($( event.target ).closest( ".price" ).text());
        }
    }

这会在 console.log 中返回空白行。如何获得 price 值？

编辑

server.js（从这里获取项目）：

            res.render('game/index', {
                items
            });

使用小胡子来展示物品：

index.hbs：

      <div id="shop" class="row" v-cloak>
    {{#each items}}
        <img src="{{img}}">
        <p>{{title}}</p>
        <p class="price">{{item.price}}</p><br>
        <button class="btn btn-danger" @click="buyItem">Buy</button>
    {{/each}}
      </div>

Answer 1

您应该在事件处理程序中将价格作为参数传递：

... @click="buyItem(price)" ...

您的 buyItem 将变为：

methods: {
        buyItem: function(price){    
            console.log(price);
        }
    }

Answer 2

见https://jsfiddle.net/mykwgo8x/1/。

   <div id="shop" class="row" v-cloak>
      <!-- use v-for directive, not {{#each items}} -->
      <div v-for="item in items">
          <!-- <img src="{{item.img}}"> -->
          <!-- properties need to be accessed with "item." -->
          <p>{{item.title}}</p>
          <p class="price">{{item.price}}</p><br>
          <button class="btn btn-danger" @click="buyItem(item)">Buy</button>
      </div>
   </div>

new Vue({
  el: "#shop",
  data: {
    items: [
      {
        title: "item 1",
        price : 10
      },
      { 
        title : "item 2",
        price: 2
      }
    ]
  },
  methods: {
    buyItem: function(item){
        console.log(item.price);
    }
  }
})