Dynamic html render

Get Help
#1

I have a table and selected_rows object that contains selected DOM rows by user clicks, i want to render selected_rows object in my html
Here is a demo of my code

#2

I took your component code and extracted/modified the test data in order to iterate. I also modified how the selected rows are displayed. Whether you go with my changes or not, possibly you will find something useful.

User data:

const users = [
  {
    id: 1,
    name: 'Jack',
    company: 'FaceBook',
    salary: 120000
  },
  {
    id: 2,
    name: 'Jill',
    company: 'Google',
    salary: 130000
  },
  {
    id: 3,
    name: 'Bob',
    company: 'Tesla',
    salary: 140000
  },
  {
    id: 4,
    name: 'Katherine',
    company: 'Lamborghini',
    salary: 150000
  },
]

export default users;

Selected row component:

<template>
  <div id="selected-row-users">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>company</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr :class="{ selectedrow: isSelected(user.id) }" v-for="user in users" :key="user.id" @click="selectRow(user.id)">
          <td>{{ user.name }}</td>
          <td>{{ user.company }}</td>
          <td>{{ user.salary }}</td>
        </tr>
      </tbody>
    </table>
    <!-- How to render  OR dynamic render this object ?? 
    selected_rows object
    -->
    <hr>
    <h3>Selected Rows</h3>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>company</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in selectedUsers" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.company }}</td>
          <td>{{ user.salary }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import users from './selected-row-users.js'

  export default {
    name: "SelectedRowUsers",
    data() {
      return {
        users: users,
        selectedUsers: [],
      };
    },
    methods: {
      selectRow(selectedId) {
        // Check if user already selected
        if (this.isSelected(selectedId)) {
          return;
        }

        let selectedUser = this.users.find( ({ id }) => id === selectedId );
        // Copy and store selected user object
        let userCopy = Object.assign({}, selectedUser);
        this.selectedUsers.push(userCopy);
      },
      isSelected(userId) {
        return this.selectedUsers.find( ({ id }) => id === userId );
      }
    },
  };
</script>
#3

I really appreciate it, but its far from the main goal which is rendering selected_rows in DOM
thank you for your time nice clean code to select the rows BTW

#4

I found [SOLVED] Trouble with DOM not updating
and i also solved this by using Vue.set(), Vue.delete() in order to make object reactive