Conceal rows in the table until the search (filterBy) is completed

Currently, I am utilizing Vue.js version 1.x and plan to update soon. My requirement is to have a table of rows containing some data. To filter the table rows using filterBy, I am using a Vue.js component. However, I want the table rows to remain hidden until a search/filter action is performed.

I would appreciate it if someone could assist me with this query. Do I need to include an event listener somewhere? If so, where would be the most suitable place for it?

For reference, here is a JSFiddle link: https://jsfiddle.net/m7sgaron/863/

Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]
  }
})
body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}

td {
  background-color: #f9f9f9;
}

th, td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

#search {
  margin-bottom: 10px;
}
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<!-- component template -->
<script type="text/x-template" id="grid-template">
  <table>
    <tbody>
      <tr v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

<!-- demo root element -->
<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid
    :data="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
</div>

Answer №1

To simplify the process, you can use a conditional directive like v-show or v-if on the tr element. This expression will verify if the searchQuery has any length.

<script type="text/x-template" id="grid-template">
  <table>
    <tbody>
      <tr v-show="filterKey.length" v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

Check out a live demo here: https://jsfiddle.net/zp0m0om6/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

Anticipated outcome for absent callbacks in module API implementation

I am seeking advice on the expected behavior when developing a Node module API. It is becoming complicated in my module implementation to check if the caller has provided a callback before calling it. I am starting to believe that it may be the user's ...

Utilizing JavaScript to retrieve input names from arrays

This is the HTML form that I am currently working with: <form action="#" method="post"> <table> <tr> <td><label>Product:<label> <input type="text" /></td> <td><label>Price:<label> ...

Display information using AngularJS within the Ionic framework

I am attempting to display a variable that is within a for loop. Here is my code where I store the value of $scope.datosTuto[i].Nombre in a variable. When I use an alert to print $scope.NombTuto, I can see the data but I want to display it on my HTML page. ...

What is the ideal JavaScript framework for implementing drag-and-drop, resize, and rotation features?

I am planning to create a web application that involves images and text with user handle functionalities such as drag-and-drop, resizing, and rotating. Although I have tried using JQuery UI js to implement drag-and-drop, rotate, and resize, I have encount ...

Prevent drag and drop functionality in QtWebkit

As I work on creating an HTML GUI for my application using Qt's WebKit, everything is going smoothly with one minor issue. I am trying to prevent users from dragging and dropping images from the GUI itself. While I have successfully disabled text sele ...

Understanding the Significance of this Regular Expression

I need assistance with regular expressions as I am not very familiar with them. The issue I am facing is related to a jQuery dynacloud plugin that stops working when a regex match occurs in my code. Can someone please help me understand what this regex mat ...

Angular's implementation of deferred only displays the final value in the loop

I've created a personalized synchronization process that queues up all my sync records in sequence. When my service retrieves multiple sync records, it processes them and updates the last sync date for successful records, or logs errors for failed rec ...

Bringing in More Blog Posts with VueJS

Exploring the Wordpress API and devising a fresh blog system. As a newbie to VueJS, I'm intrigued by how this is handled. The initial blog posts load as follows: let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&p ...

Ensure each list item is directly aligned when swiping on a mobile device

Looking to make a simple horizontal list swipeable on mobile devices with tabs that snap from tab to tab, activating the content for the active tab immediately. The desired effect is to swipe directly from one tab to the next without having to click separ ...

I seem to be stuck on the Pokemon Damage Calculator kata on codewars. I've been trying to pass it, but I

My function seems to be working well, but I'm having trouble passing all the tests. Can anyone offer some assistance? You can find the kata at this link: function calculateDamage(yourType, opponentType, attack, defense) { let key = yourType + opp ...

mysql nodejs function is returning a null value

Kindly review the contents of the dbfn.js file /*This is the database function file*/ var db = require('./connection'); function checkConnection(){ if(db){ console.log('We are connected to the Database server'.bgGreen); ...

Tips for dividing HTML code on a page into individual nodes

I am looking to extract the HTML content from a website and then parse it into nodes. I attempted the following code: function load() { $(document).ready(function () { $.get("https://example.com/index.html", function (data) { const loadpage ...

Using Google Maps API to combine geoJSON properties with fixed text in an infobox

I've been working on a GoogleMaps project where I load geoJSON points and display their "waterlevel" property in an info-box when hovering over a point. However, I want the info-box to show "Water Level = #" instead of just "#". So far, I've man ...

The correct pattern must not be matched by ng-pattern

Within the ng-pattern attribute, we can define a specific pattern for a field to match. Is there a way to indicate that the field should NOT match the specified pattern? For instance: <input type="text" ng-pattern="/[*|\":<>[\]{}`()&a ...

The quantity of elements stays constant even after adding to them using Javascript

I have implemented a notes list feature that allows users to add notes using an input field. Beneath the notes list ul, there is a message showing the total number of notes: $('li').length. However, I encountered an issue where the count of not ...

Can state values be utilized as content for Meta tags?

I am looking for a way to display image previews and titles when sharing a page link. In order to achieve this, I am using the Nextjs Head Component. The necessary details are fetched on page load and used as content for the meta attributes. let campaign = ...

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

Display personalized content over images utilizing the jQuery galleria plugin

Hey there, I've been successfully using the jquery galleria plugin, but now I'm looking to add some custom content and links that will display in the center of the image. Is it possible to achieve this with galleria? Your insights would be greatl ...

Surprising discovery of the reserved term 'await'

function retrieveUsers() { setTimeout(() => { displayLoadingMessage(); const response = fetch("https://reqres.in/api/users?page=1"); let userData = (await response.json()).data; storeAllUserDa ...