DEV Community: Alex Mourer

Click Event Filtering on a JSON Rendered List in Vue.js

Alex Mourer — Tue, 04 Dec 2018 17:54:11 +0000

In this tutorial, we'll explore basic click event filtering on a rendered list using JSON data in Vue.js. This is a basic tutorial, but it should be a solid foundation to start building something more complex.

TL;DR
Here is an example of a working CodeSandbox
https://codesandbox.io/s/kkvr7z5rr3

Why would we need to do this?

Filtering data is a part of my everyday life as a front-end dev. I'm often presented with a large piece of data that needs to be looped through, filtered, and displayed. In this tutorial, we will fetch() a JSON file, build a rendered list from the data, and filter the list with click event controls.

We will not be using any dependencies outside of Vue.js.

How do we do this?

First, we'll need to have Vue.js up and running. This is covered here, or you can set up a CodeSandbox.

If you used the Vue CLI or CodeSandbox to set up your app, you'll likely already have the initial structure of your project in place. In case you don't, you'll need a place to display our future component.

// App.vue file
<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>

The above code is a good starting point for this tutorial. In the provided CodeSandbox example, this file is named App.vue. The code shown here will serve as the foundation for displaying the component we will build.

In this tutorial, we will be placing the filter controls and rendered list inside the same component. If this were a larger application or a longer tutorial, I would likely split them in two and share data between. I've written a separate tutorial on sharing data between multiple components here.

Okay, let's start building out our component.

In the provided example the file we are working with is named DataDisplay.vue.

// DataDisplay.vue file
<template>
  <div>
  </div>
</template>

<script>
  export default {
    name: "DataDisplay"
  };
</script>

The first thing we'll work on is data. I've created sample JSON data through a service called JSON Generator. To bring the data into our DataDisplay.vue file, we'll fetch() the data in the created lifecycle hook. Information on lifecycle hooks can be found here. All of the data returned will be stored in the data property users.

// DataDisplay.vue file
<template>
  <div>
  </div>
</template>

<script>
  export default {
    name: "DataDisplay"
    data: function() {
      return {
        users: []
      }
    },
    created() {
      var apiURL = "https://next.json-generator.com/api/json/get/4JCnNiTCr";
      fetch(apiURL)
        .then(res => res.json())
        .then(res => (this.users = res))
        .catch(error => console.log(error));
    }
  }
</script>

Now that we have our data stored, we can work on displaying it.

Let's loop through the data stored in the users property with Vue's v-for directive. The v-for directive requires a syntax structure of x in y or (x, i) in y. You can also use of as the delimiter instead of in. In this example, our syntax is "(entry, index) in users", where users is the data source, entry is an alias for the element being iterated on, and index is the index of the item in the rendered list.

The test data provided in the example is a list of developers with some associated information for each. We'll render their name and main coding language in an unordered list. You can view the full JSON file here.

// DataDisplay.vue file
<template>
  <div>
    <ul class="userWrap">
      <li
        v-for="(entry, index) in users"
        :item="entry"
        :key="index"
        class="user"
      >
        <h2>{{ entry.name }}</h2>
        <span>
            Primary Language: <strong>{{ entry.mainLanguage }}</strong>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "DataDisplay"
    data: function() {
      return {
        users: []
      }
    },
    created() {
      var apiURL = "https://next.json-generator.com/api/json/get/4JCnNiTCr";
      fetch(apiURL)
        .then(res => res.json())
        .then(res => (this.users = res))
        .catch(error => console.log(error));
    }
  }
</script>

You should see a list of developers and their main coding language. We can now build out our buttons to filter this list.

We will be adding a list of buttons, a series of data properties, and the v-if directive to our results list.

Starting with the data properties. The fkey property is the data field that we will be keying our filtering on. filterList is an array of filter values we'll be checking our data against. The list of filter buttons will be built off filterList as well. filter contains the value of the current set filter. By default, we want All of the users to show.

data: function() {
  return {
    fkey: "mainLanguage",
    filterList: ["JavaScript", "Python", "PHP", "Java", "All"],
    filter: "All",
    users: []
  }
}

Let's build out our filter control buttons.

We will use the v-for directive again. This time, to iterate through the filterList array and generate our filtering values. You'll notice two new pieces in our rendered list properties, @click & :class directives. The @click will set the value for filter when the button is clicked. :class will set the button's class as active when entry === filter.

<button
  v-for="(entry, index) in filterList"
  :item="entry"
  :key="index"
  @click="filter = entry;"
  :class="{ active: entry == filter }"
>
  {{ entry }}
</button>

Next, we will connect our filtering buttons to our rendered user list.

To do this, we will add Vue's v-if directive to our list's properties. Our example uses v-if="entry[fkey] === filter || filter === 'All'". If our entry's mainLaguage is equal to filter or if filter is set to 'All', it will return true and show the entry.

<ul class="userWrap">
  <li
    v-for="(entry, index) in users"
    v-if="entry[fkey] === filter || filter === 'All'"
    :item="entry"
    :key="index"
    class="user"
  >
    <h2 class="title">{{ entry.name }}</h2>
    <span class="language">
      Primary Language: <strong>{{ entry.mainLanguage }}</strong>
    </span>
  </li>
</ul>

This is the full DataDisplay.vue file. I added in some CSS for fun.

// DataDisplay.vue
<template>
  <div>
    <div>
      <button
        v-for="(entry, index) in filterList"
        :item="entry"
        :key="index"
        @click="filter = entry; active = index;"
        :class="{ active: entry == filter }"
      >
        {{ entry }}
      </button>
    </div>
    <ul class="userWrap">
      <li
        v-for="(entry, index) in users"
        v-if="entry[fkey] === filter || filter === 'All'"
        :item="entry"
        :key="index"
        class="user"
      >
        <h2 class="title">{{ entry.name }}</h2>
        <span class="language">
          Primary Language: <strong>{{ entry.mainLanguage }}</strong>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DataDisplay",
  data: function() {
    return {
      fkey: "mainLanguage",
      filterList: ["JavaScript", "Python", "PHP", "Java", "All"],
      filter: "All",
      users: []
    };
  },
  created() {
    var apiURL = "https://next.json-generator.com/api/json/get/4JCnNiTCr";
    fetch(apiURL)
      .then(res => res.json())
      .then(res => (this.users = res))
      .catch(error => console.log(error));
  }
};
</script>

<style scoped>
button {
  background: #74b6cc;
  border: none;
  color: #fff;
  padding: 10px;
  margin: 5px;
}
button.active {
  background: #0089ba;
}
.userWrap {
  list-style-type: none;
  padding: 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}
.user {
  padding: 10px;
  margin: 1% 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 45%;
  text-align: left;
}
h2.title {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0;
}
.language {
  display: block;
  font-size: 0.9rem;
}
</style>

The last step is to import our DataDisplay component into our App.vue file.

// App.vue
<template>
  <div id="app">
    <DataDisplay />
  </div>
</template>

<script>
import DataDisplay from "./components/DataDisplay";

export default {
  name: "App",
  components: {
    DataDisplay
  }
};
</script>

🍻

Sharing Data Between Components in Vue.js

Alex Mourer — Thu, 29 Nov 2018 23:06:40 +0000

In this tutorial, we'll explore generating data in one component, and passing it to another in Vue.js.

TL;DR
Here is an example of a working CodeSandbox
https://codesandbox.io/s/l4yj6jxpqz

Why would we need to do this?

If you've worked on a large-scale Vue application, chances are, at some point you've wanted to generate data in one component and then do something with it in a separate component. In this tutorial, we will pass user inputted text from one component and display it as a list in another. We will not be using any dependencies outside of Vue.js.

How do we do this?

First, we'll need to have Vue.js up and running. This is covered here, or you can set up a CodeSandbox.

If you used the Vue CLI or CodeSandbox to set up your app, you'll likely already have the initial structure of your project in place. In case you don't, we'll need a place to display our future components.

// App.vue file
<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>

Next, we'll start building our components.

In the example listed, there have been two components created in a folder named components.

The first file we'll look at is UsrMsg.vue.

// UsrMsg.vue file
<template>
  <div>
    <input
      placeholder="Enter Text Here"
      v-model="tempMessage"
      @keyup.enter="submit"
    />
  </div>
</template>

<script>
export default {
  name: "UsrMsg",
  data() {
    return {
      tempMessage: ""
    };
  },
  methods: {
    submit: function() {
      this.$emit("inputData", this.tempMessage);
      this.tempMessage = "";
    }
  }
};
</script>

In this file, you'll see an input element. The input element updates the data field tempMessage by using Vue's v-model.

<input
    placeholder="Enter Text Here"
    v-model="tempMessage"
    @keyup.enter="submit"
/>

Upon hitting enter, the method submit is called. Inside this method, we use $emit (emit: "to send out a beam") to make tempMessage available to a parent component. $emit takes a string as the first parameter, in this case, inputData. It can also accept a second parameter, which is usually a piece of data. In our example, we are passing the value of tempMessage. This could also be an integer, a variable, an array, or an object. You'll also notice that we set tempMessage = "" after the $emit. This clears out the input field to accept the next value.

submit: function() {
    this.$emit("inputData", this.tempMessage);
    this.tempMessage = "";
}

Let's add the UsrMsg component to our App.vue file.

// App.vue file
<template>
  <div id="app">
    <UsrMsg @inputData="updateMessage" />
  </div>
</template>

<script>
import UsrMsg from "./components/UsrMsg";

export default {
  name: "App",
  components: {
    UsrMsg
  },
  data: function() {
    return {
      childData: ""
    };
  },
  methods: {
    updateMessage(variable) {
      this.childData= variable;
    }
  }
};
</script>

First, we want to make the data that we are emitting from the component available. We do that by adding a listener around the data we are emitting. We chose inputData as the data name in our component, so this will be our listener. The second piece executes a method called updateMessage.

<UsrMsg @inputData="updateMessage" />

Whenever the data inside our component changes, the updateMessage method will be executed. Inside this method, we make the component data available through the data field childData. It's now ready to be passed as a prop to another component.

updateMessage(variable) {
    this.childData= variable;
}

Now, let's build the component we will be passing the data to.

We'll start by creating a file named Results.vue.

// Results.vue file
<template>
  <div>
    <li v-for="(message, index) in messageList" :item="message" :key="index">
      {{ message }}
    </li>
  </div>
</template>

<script>
export default {
  name: "Results",
  props: {
    msg: {
      type: String
    }
  },
  data: function() {
    return {
      messageList: []
    };
  },
  watch: {
    msg: function() {
      this.messageList.push(this.msg);
    }
  }
};
</script>

In this example, we are creating a list based off an array called messageList. It is not required to push the data into an array but it is a bit more exciting for demo purposes.😜

<li v-for="(message, index) in messageList" :item="message" :key="index">
    {{ message }}
</li>

The messageList array is keying off the data prop msg.

props: {
    msg: {
      type: String
    }
}

As data is passed to this component, through the data prop msg, it is pushed to the messageList array. We use the watch property to add on to the array upon new data in the msg prop.

watch: {
    msg: function() {
      this.messageList.push(this.msg);
    }
}

Our <li> element will update when new items are added to the messageList array.

Now, we can add the Results component to our App.vue file.

<template>
  <div id="app">
    <UsrMsg @inputData="updateMessage" /> <Results :msg="childData" />
  </div>
</template>

<script>
import UsrMsg from "./components/UsrMsg";
import Results from "./components/Results";

export default {
  name: "App",
  components: {
    UsrMsg,
    Results
  },
  data: function() {
    return {
      childData: ""
    };
  },
  methods: {
    updateMessage(variable) {
      this.childData = variable;
    }
  }
};
</script>

We add in our component Results and pass in childData through the prop msg.

<Results :msg="childData" />

We can now generate data in the UsrMsg component and pass it through to the Results component.