Vue

by luka kupunia

HTML

<div id="app">
  <div class="texts">
    <div class="text" v-for="text in tableActive" :key="text.id">{{ text.text }}</div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    isActive: 1,
      table: {
          content: [
              {
                  id: 1,
                  text: "hello text-1"
              },
              {
                  id: 2,
                  text: "hello text-2"
              },
              {
                  id: 3,
                  text: "hello text-3"
              }
          ]
      }
  },
  computed: {
    tableActive() {
      return this.table.content.filter(key => {
        return key.id === this.isActive;
      });
    }
  }
})