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

Question

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

我尝试了许多不同的方法，但都没有奏效。当我使用 {{ clicked(row) }} 在我的 HTML 中显示返回值时，我也会收到以下错误：

“属性或方法“行”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。”

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

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

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

我花了几天的时间试图解决这个问题 - 非常感谢任何帮助！

HTML

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

JS

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);
}
}
})

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

我目前只收到各种错误。

Answer 1

您目前在模板的<p> 标记中有clicked(row)。但是，由于您尚未为 vue 实例定义 row 属性，并且您超出了 v-for 标记的范围，因此您将收到“未定义属性或方法“行”的错误。

<p>{{ clicked(row) }}</p> 告诉 Vue 的是，无论何时渲染或重新渲染模板，调用 Vue 实例的 clicked 方法（传递不存在的 row 属性）并显示该方法返回的任何内容.

您想要设置一个值，以便在您单击其中一个按钮时显示。你应该在你的数据函数中添加一个单独的属性，比如displayTitle，你可以在clicked方法中设置它。然后，只需在您的 <p> 标签中使用 displayTitle。

这是一个例子：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>{{ displayTitle }}</p>
</div>

** 旁注：最佳做法是始终使用 data 函数定义 Vue 实例，该函数返回一个对象，而不是您的示例代码中的 data 属性。