vueJS隐藏动态表格行中的元素答案

【问题标题】：vueJS hide element in dynamic table rowvueJS隐藏动态表格行中的元素
【发布时间】：2017-10-19 23:32:58
【问题描述】：

我有一个如下所示的表格：

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td><p class="title">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="title()">Remove title</a></td>
    </tr>
  </tbody>
</table>

现在我想知道当单击删除标题链接时，如何在 <p class="title">My title</p> 上切换 jquery .hide()。我不想使用v-show，因为我想了解如何在 vueJS 的动态生成行中定位元素。

问题是我的表中有很多行，所以每个标题标签都必须有一个 uniqe 类，我不明白如何在动态生成的行上隐藏特定标题

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

可以使用v-show 指令以这种方式完成。

new Vue({
  el: '.table',
  data: {
    rows: [
      { showTitle: true, job: 'A' },
      { showTitle: true, job: 'B' },
      { showTitle: true, job: 'C' }
    ]
  }
});

<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td><p v-show='row.showTitle' class="title">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="row.showTitle = false">Remove title</a></td>
    </tr>
  </tbody>
</table>

编辑：

这是 jQuery 版本，但正如我已经说过的那样，这是一种不好的做法。

new Vue({
  el: '.table',
  data: {
    rows: [
      { job: 'A' },
      { job: 'B' },
      { job: 'C' }
    ]
  },
  methods: {
    hideTitle(index) {
      $(this.$refs['title' + index]).hide();
    }
  }
});

<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td><p class="title" :ref="'title' + index">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="hideTitle(index)">Remove title</a></td>
    </tr>
  </tbody>
</table>

【讨论】：

感谢您的示例。但我想知道如何使用 jquery 方式进行操作，以及如何定位正在单击的行中的元素。
如果我只知道如何获得被点击的行以及其中的项目，我可以应用其他内容，例如更改行内的文本标签等
混合使用 Vue 和 jQuery 应该被认为是一种不好的做法。
添加 jQuery 版本。
感谢添加 jquery！我只是觉得v-show 有点“静态”，因为我无法定位行元素。例如，单击按钮时更改动态行中的占位符

【解决方案2】：

对于有条件的显示，你可以使用 v-show 指令，文档链接在这里： v-show doucment.

希望对你有帮助！

【讨论】：

感谢您的提示。但我想知道如何使用 jquery 方式进行操作，以及如何定位正在单击的行中的元素。
如果我只知道如何获得被点击的行以及其中的项目，我可以应用其他内容，例如更改行内的文本标签等
你可以使用 $event.target 来定位被点击的元素。

【解决方案3】：

试试这个。有用。使用 v-f 和标题模型

模板

<table class="table">
  <thead>
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows">
      <td v-if="title  === false"><p class="title">My title</p></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="title()">Remove title</a></td>
    </tr>
  </tbody>
</table>

脚本

  data () {
        title:false,
},


 methods: {
title(){

        this.title= true
}
}

【讨论】：

但这类似于v-show 我想知道如何使用jquery 隐藏标题？我或多或少如何定位行中的特定元素。数据是动态的，所以可能有多行，这意味着我不能使用类标识符

【解决方案4】：

正如其他人所提到的，混合使用 jQuery 和 Vue 并不是最好的主意。但是，如果必须，您可以使用@flypan 提到的event.target 以及一些 jQuery 选择器来获得您想要的。

我使用您的 HTML 将 JSFiddle 放在一起，作为可以做什么的示例：

new Vue({
    el: '#app',
  data: {
    rows: [
        { job: 'A' }, { job: 'B' }
    ]
  },
  methods: {
    title: function() {
      $title = $(event.target).parent().parent().find("p");
      $($title).hide();
    }
  }
});

您可能想要收紧选择器以找到“p”，但这只是一个示例。这是工作的 JSFiddle：

https://jsfiddle.net/psteele/p5Lpxj5a/

【讨论】：