Vuejs2 如何在Vue中从v-for循环中的表行返回值？

当单击表行中的按钮时，我想从表行（由v-for循环生成）返回一个值（“Title”），但我想不出正确的方法。我可以在单击时将值记录到console.log中，但我无法让它在浏览器中实际返回值

我尝试过许多不同的方法，但都不管用。当我使用{{clicked（row）}}在HTML中显示返回值时，也会出现以下错误：

属性或方法“行”未在实例上定义，但在呈现过程中被引用。请通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

如果我删除“row”参数也不起作用

此方法将正确的值记录到console，但不在浏览器中返回值：

methods: {
clicked(row) {
console.log(row.title);
return (row.title);
}

我花了好几天的时间试图弄明白这一点-非常感谢任何帮助

HTML

我试图在单击其行上的按钮时显示“Title”的值。（如果我同时单击两行，我希望显示两个“标题”）

---

我目前只收到各种错误。

您当前在模板的

标记中单击了
（行）
。但是，由于您尚未为vue实例定义
行
属性，并且您不在
v-for
标记的范围内，因此会出现“属性或方法”行“未定义”错误

{{clicked（row）}
告诉Vue的是，无论何时呈现或重新呈现模板，都要调用Vue实例的
clicked
方法（传递不存在的
row
属性），并显示该方法返回的内容

您需要设置一个值，以便在每次单击其中一个按钮时显示。您应该在数据函数中添加一个单独的属性，例如
displayTitle
，您可以在
clicked
方法中设置该属性。然后，只需在
标记中使用
displayTitle

下面是一个例子：


newvue({
el:“应用程序”，
数据（）{
返回{
行：[
{id:001，标题：“Lorem”，价格：5}，
{id:002，标题：“Ipsum”，价格：23}，
{id:003，标题：“多洛”，价格：8}
],
显示标题：“”
}
},
方法：{
单击（行）{
this.displayTitle=row.title；
}
}
})

标题
价格
添加到购物车
{{row.title}}
{{row.price}}
添加到购物车
{{displayTitle}}

谢谢-非常感谢！我只是不能100%确定如何在单击的
行中设置
displayTitle
方法-你能告诉我你的意思吗？抱歉-我第一次查看时，你的示例代码没有加载。非常感谢你的帮助！正如编辑一样，以下代码
添加到购物车
需要更新为
添加到购物车
，以便我们可以从行对象获取
id
属性值
<div id="app">
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Price</th>
                <th>Add To Cart</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in rows">
                <td>{{ row.title }}</td>
                <td>{{ row.price }}</td>
                <td><button @click="clicked (row)">Add To Cart</button></td>
            </tr>
        </tbody>
    </table>
    <p>{{ clicked(row) }}</p>
</div>
</div>

var app = new Vue({
el: "#app",
data: {
rows: [{
    id: 001,
    title: "Lorem",
    price: 5
  },
  {
    id: 002,
    title: "Ipsum",
    price: 23
  },
  {
    id: 003,
    title: "Dolor",
    price: 8
  },
 ]
},
methods: {
clicked(row) {
  console.log (row.title);
  return (row.title);
}
}
})