Vue.js show hide multiple elements with data list

Question

I'm new in Vue.js, i'm using Vue+Webpack. I need that each link can show the data based on each id when they're clicked, and match with show attribute. I create it in .vue file.

export default {
  el: 'skill',
  props: {
    skill: Object,
    selectedId: Number
  },
  computed: {
    show () {
      return this.skill.id === this.selectedId
    }
  },
  name: 'HomePage',
  data () {
    return {
      show_skill: 1,
      skills: [
        {
          id: 1,
          title: 'css',
          items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>',
          show: true
        },
        {
          id: 2,
          title: 'js',
          items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>',
          show: false
        },
        {
          id: 3,
          title: 'html',
          items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>',
          show: false
        },
        {
          id: 4,
          title: 'general',
          items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>',
          show: false
        },
        {
          id: 5,
          title: 'tools',
          items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>',
          show: false
        }
      ]
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>


<div class="c-skills">
  <a href="#" class="active" @click="skill.show">CSS</a>
  <a href="#">JS</a>
  <a href="#">HTML</a>
  <a href="#">Tools</a>
  <a href="#">General</a>
</div>         

<div class="c-desc" id="vn-skillset">
    <skill :selected-id="selectedId" :post="skill" @click="selectedId = skill.id">
      <h4 v-show="skill.show">{{ skill.title }}</h4>
      <ul v-show="skill.show">{{ skill.items }}</ul>
    </skill>
</div>

currently that code shows error :

What is vue.esm? What is $mount? What the right things should I do to reach what i need? How to implement that?

Answer 1

First of all, you have to enclose all your HTML code into one <div id="skill"> tag and set an id to that tag so you can target it in your Vue instance.

Moreover, since you're using the cdn version of Vue you must use new Vue ({}) syntax to create your root Vue instance, once you already did you can use the export default {} object in your different components.

$mount is a built-in property and one of the life-cycle hooks of the Vue instance it's when your browser takes all your Vue code and try to mount it on top of the selected <div> tag in your HTML body, check this Instance Lifecycle Hooks

Here's an alternative version of your code :

<div id ="skill">

<div class="c-skills">
  <a href="#" @click="show(1)">CSS</a>
  <a href="#" @click="show(2)">JS</a>
  <a href="#" @click="show(3)">HTML</a>
  <a href="#" @click="show(4)">Tools</a>
  <a href="#" @click="show(5)">General</a>
</div>         

<div>
      <h4>{{ skill.title }}</h4>
      <ul v-html="skill.items"></ul>
</div>
</div>

Vue Instance:

new Vue ({
  el: '#skill',
  data () {
    return {
    skill:{title:'',items:''},
      skills: [
        {
          id: 1,
          title: 'css',
          items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>',
        },
        {
          id: 2,
          title: 'js',
          items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>',
        },
        {
          id: 3,
          title: 'html',
          items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>',
        },
        {
          id: 4,
          title: 'general',
          items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>',
        },
        {
          id: 5,
          title: 'tools',
          items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>',
        }
      ]
    }
  },
  methods: {
    show(x){

      for (var i =0; i<=this.skills.length; i++) {
  
        if (x == this.skills[i].id){
          this.skill.title = this.skills[i].title;
          this.skill.items = this.skills[i].items;
        }
      }       
   }      
  }
});

In your case, I highly recommend you to use vue-router property here is a useful tutorial for it : Vue Router documentation

Answer 2

Your requirement is quite simple but you are misunderstanding some points so below is some points that you need to research more to implement what you need now

1. You are using skill as a component on the template but it's just a Object from props. So you need to learn how to create a component, declare and using it in another component.
2. Use v-for directive to generate a list of skills.
3. You need learn how to use props and computed properly.