1

I have a table that looks like this:

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

Now I wonder how I can toggle a jquery .hide() on the <p class="title">My title</p> when the remove title link is clicked on. I dont want to use v-show since I am trying to understand how I can target elements within dynamic generated rows in vueJS.

The problem is that there are many rows in my table so every title tag must have a uniqe class and I dont understand how I can hide a specific title on dynamic generated rows

Improve this question

4 Answers 4

Reset to default
1

Can be done this way using v-show directive.

new Vue({
  el: '.table',
  data: {
    rows: [
      { showTitle: true, job: 'A' },
      { showTitle: true, job: 'B' },
      { showTitle: true, job: 'C' }
    ]
  }
});
<script src="https://unpkg.com/[email protected]/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>

Edit:

Here is jQuery version but as I already said this is a bad practice.

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/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the example. But I want to know how I can do it the jquery way and also how I can target elements within the row being clicked.
If I only know how I can get the row being clicked and it items within I can apply other things such as changing text labels within the row etc
Mixing Vue and jQuery should be considered a bad practice.
Added jQuery version.
Thanks for the addd jquery! I just felt that the v-show was a bit "static" since I cant target the row elements. Eg change a placeholder in the dynamic row when the button is clicked
0

Try this one. it works. using v-f and title model

template

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

script

  data () {
        title:false,
},


 methods: {
title(){

        this.title= true
}
}
Improve this answer

1 Comment

But this is similar to v-show I wonder how I could hide the title using jquery? More or less how can I target that specific element in the row. The data is dynamic so there could be multiple rows which means I cant use class identifier
0

As others have mentioned, mixing jQuery and Vue is not the best idea. However, if you must, you can use the event.target that @flypan mentioned along with some jQuery selectors to get what you want.

I put together a JSFiddle using your HTML as an example of what can be done:

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

You would probably want to tighten the selector to find the "p", but this is just an example. Here's the working JSFiddle:

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

Improve this answer

Comments

0

For conditionally displaying, you can use v-show directive,document link here : v-show doucment.

Hope this can be helpful to you！

Improve this answer

3 Comments

Thanks for the tip. But I want to know how I can do it the jquery way and also how I can target elements within the row being clicked.
If I only know how I can get the row being clicked and it items within I can apply other things such as changing text labels within the row etc
You can use $event.target to target element which has been clicked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.