title: Get Specific Data from json file using vue
body: <p>I am trying to add a select option. In this option there should be the name of the employees. Once an employee is selected vue should render its profile information something like this:</p>
  <ul>
  <li>Name: Bob</li>
  <li>Title: Mr</li>
  <li>Gender: Male</li>
  </ul>
  <p>All information is stored in a json file.</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
  &lt;div class=&quot;field&quot;&gt;
          &lt;label class=&quot;label employee-name&quot;&gt;Employee Name&lt;/label&gt;
          &lt;div class=&quot;control&quot;&gt;
           &lt;select v-model=&quot;employee&quot; class=&quot;is-small&quot;&gt;
              &lt;option v-for=&quot;employees in employees&quot;&gt;{{ employee.name }}&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;pre&gt;{{ employee.name }}, {{ employee.gender }}, {{ employee.designation }}&lt;/pre&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <pre><code>&lt;script type=&quot;text/json&quot; src=&quot;./json/employees.json&quot;&gt;&lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  new Vue({
      el: '#app',
      data: {
          employee: null,
          employees: ''
      },
      created: function () {
        fetch(&quot;/json/employees.json&quot;)
          .then(r =&gt; r.json())
          .then(employees =&gt; {
            this.employee=employees;
         });
      }
  });
  &lt;/script&gt;
  </code></pre>
  <p>And the json file is something like this:</p>
  <pre><code>[{
    &quot;name&quot;: &quot;Bob&quot;,
    &quot;gender&quot;: &quot;male&quot;,
    &quot;title&quot;: &quot;Mr&quot;
  }, {
    &quot;name&quot;: &quot;Alice&quot;,
    &quot;gender&quot;: &quot;female&quot;,
    &quot;title&quot;: &quot;Mrs&quot;
  }]
  </code></pre>
  <p>I think there is something wrong with the function. Any help would be appreciated.</p>
  <p>PS: The browser console do not show any error or warning.</p>