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

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

   <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>

这将返回console.log中的空行。我如何获得

价格

值

编辑

server.js（从此处获取项目）：

使用小胡子显示项目：

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>

{{{#每项}
{{title}}

{{item.price}


购买
{{/每个}}

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

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

您的购买项目将成为：

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

看

{{item.title}

{{item.price}


购买

newvue({
el:“商店”，
数据：{
项目：[
{
标题：“项目1”，
价格:10
},
{ 
标题：“项目2”，
价格:2
}
]
},
方法：{
buyItem：功能（项目）{
控制台日志（项目价格）；
}
}
})

方法查看元素的父元素。如果你真的想使用jquery，你应该试试

.prev（）

。@ry4nolson没有jquery就无法解决这个问题。。。vue有选项吗？您完全可以不用jquery来实现这一点。见下面我的答案。您将无效语法与不正确的Vue使用结合在一起。之后该怎么办？我在数据中创建了

price:null

，如果我使用console.log，我会得到

null

argh，因为我没有使用

v-for

。我是否应该为每个项目创建一个类

项目

？您实际使用的是Vue吗

{{{{每个

都不是Vue中的循环。使用

v-for

循环Vue数据中的项目。我正在使用Vue。但是要从我的后端服务器.js获取项目，我需要使用

{{每个

这样获取它们，这没有任何意义。

{{#每个

都是mustache语法。Vue不使用这种语法。发布更多代码，也许会有意义。该模板是否在后端运行？我更新了它。是的，我应该使用什么来代替NodeJS？Vuetify？

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

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