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

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

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

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

这是一个例子：

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属性。

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

1 个答案: