Question

我有一个html页面，它有一个表和一个使用v-for的迭代行：

<div id="cloud">
  Cloud Based
</div>

<div class="container">
  CONTAINER CONTENT
</div>

我有这个js代码。

<script>
function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value.toUpperCase();
}
</script>

Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

在deleteItem函数中，我可以访问项目键和 tr属性并将文本附加到项目删除按钮。

Answer 1

传统的Vue方法可能是使用引用

<table id="app-4">
  <tr v-for="(item, index) in results" :key="item.id" ref="rows">
    <td>@{{ item.title }}</td>
    <td>
       <button v-on:click="deleteItem(index)" ref="deleteButtons>
           Delete
       </button>
    </td>
  </tr>
</table>

在代码中

deleteItem: function (index) {
    this.results.splice(index,1);
    //Can I access item key and tr properties from here?

    // Yes, e.g. to get the text content of the first cell
    const text = this.$refs.rows[index].cells[0].textContent.trim();

    // And add it to the delete button text
    this.$refs.deleteButtons[index].textContent += " " + text;
}

当然，这个例子有点荒谬，因为您知道项目的标题，但该原则适用于文本行的其他属性（例如属性，计算样式，类等）

如何从方法中访问vue重复项密钥

1 个答案: