title: Passing a variable to a Vue component from the parent page that called it
body: <p>I have a simple table that displays all of my data:</p>
  
  <p><strong>main file.php</strong></p>
  
  <pre><code>&lt;table class="table table-bordered table-hover" id="all-jobs"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;{{ __('Job Name') }}&lt;/th&gt;
              &lt;th&gt;{{ __('Job Description') }}&lt;/th&gt;
              &lt;th&gt;{{ __('Job Status') }}&lt;/th&gt;
              &lt;th&gt;{{ __('Job Applications') }}&lt;/th&gt;
              &lt;th&gt;{{ __('Manage') }}&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td class="non_searchable"&gt;&lt;/td&gt;
              &lt;td class="non_searchable"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;div id="app"&gt;
      &lt;div id="editJob" class="modal fade in" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;!-- Modal content--&gt;
              &lt;div class="modal-content"&gt;
                  &lt;edit-job id=""&gt;&lt;/edit-job&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Now, I have a edit button that I am trying to open an edit modal for that specific row:</p>
  
  <pre><code>&lt;a href='' data-id='{$job-&gt;id}' class='btn btn-xs btn-danger' data-toggle='modal' data-target='#editJob'&gt;&lt;i class='fa fa-close'&gt;&lt;/i&gt;&lt;/a&gt;";
  </code></pre>
  
  <p>The href is is location in one of the  of my data table, I am trying to pass that to my .vue file so I can use it for my get and post requests:</p>
  
  <p><strong>myfile.vue</strong>    </p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
         &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Edit Job&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)"&gt;
                  &lt;!-- Removed code, it's just inputs !--&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-info btn-fill btn-wd" v-on:click="addJob"&gt;Save&lt;/button&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default
      {
          props: ['id'],
          data: function () 
          {
              return {
                  countries: [],
                  name: '',
                  summary: '',
                  salarytype: '',
                  salaryfrom: '',
                  salaryto: '',
                  location: '',
                  contactemail: '',
                  contactphone: '',
                  errors: new Errors()
              }
          },
  
          methods: 
          {
              addJob: function()
              {
                  axios.post('/jobs/edit', this.$data)
                  .then(response =&gt; {
                      if(response.data.status === true){
                          $('#editJob').modal('hide');
                          getJobTable();
                      }
                      else{
                          formError = response.data.message;
                      }
                  })
                  .catch(error =&gt; this.errors.record(error.data))
              }
          },
  
          mounted: function()
          {
              console.log($(this).data('id'));
              axios.get('/jobs/my-job/')
                  .then(response =&gt; {
                      this.name = response.data.name
                      this.summary = response.data.summary
                      this.salarytype = response.data.salary_type
                      this.salaryfrom = response.data.salary_from
                      this.salaryto = response.data.salary_to
                      this.location = response.data.location
                      this.contactemail = response.data.contact
                      this.contactphone = response.data.phone
                  })
  
              axios.get('/countries')
                  .then(response =&gt; {
                      this.countries = response.data;
                  })
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I past my href id to my  to use for my request? Thanks</p>
  
  <p>MY structure:</p>
  
  <p>Created-jobs.blade.php</p>
  
  <p><a href="https://pastebin.com/TPBnC1qP" rel="nofollow noreferrer">https://pastebin.com/TPBnC1qP</a></p>
  
  <p>Edit-Job.vue</p>
  
  <p><a href="https://pastebin.com/30UWR5Nn" rel="nofollow noreferrer">https://pastebin.com/30UWR5Nn</a></p>
  
  <p>app.js</p>
  
  <p><a href="https://pastebin.com/1yxZWvVC" rel="nofollow noreferrer">https://pastebin.com/1yxZWvVC</a></p>
  
  <p>The table just populates the data, and adds the dropdown like so:</p>
  
  <pre><code>&lt;ul class='icons-list'&gt;
      &lt;li class='dropdown'&gt;
          &lt;a href='#' class='dropdown-toggle' data-toggle='dropdown' aria-expanded='false'&gt;
              &lt;i class='icon-menu9'&gt;&lt;/i&gt;
          &lt;/a&gt;
  
          &lt;ul class='dropdown-menu dropdown-menu-right'&gt;
              &lt;li&gt;
                  &lt;a data-id='{$job-&gt;id}' onclick='getID({$job-&gt;id})' data-toggle='modal' data-target='#editJob'&gt;
                      &lt;i class='icon-file-pdf'&gt;&lt;/i&gt; Edit Job
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='javascript:void();' data-id='{$job-&gt;id}' onclick='deleteJob({$job-&gt;id})'&gt;
                      &lt;i class='icon-cross'&gt;&lt;/i&gt; Delete Job
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>