Question

我有一个看起来像这样的表：

{"server": "127.0.0.1"}

现在我想知道如何在点击删除标题链接时在var server = ""; // don't need $(document).ready(function() { loadConfigFile(); loadCustomers(); }); function loadConfigFile() { $.getJSON('config/server.json', function(data) { //HERE YOu need to get the name server alert(data.server); }); }; function loadCustomers() { $.ajax({ type : 'GET', url : server+':8080/cache/getCustomers', success:function(data){ alert(data); console.log(data); $.each(data, function(i,s){ alert(s); }); } }上切换jquery <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>。我不想使用.hide()，因为我试图了解如何在vueJS中的动态生成行中定位元素。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改

这是jQuery版本，但我已经说过这是一个不好的做法。

＆＃13;
＆＃13;
new Vue({ el: '.table', data: { rows: [ { job: 'A' }, { job: 'B' }, { job: 'C' } ] }, methods: { hideTitle(index) { $(this.$refs['title' + index]).hide(); } } });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

要有条件地显示，您可以在此处使用 v-show 指令，文档链接： v-show doucment

希望这对你有所帮助！

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

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

vueJS隐藏动态表行中的元素

4 个答案: