Home>

Click the repeated value in the list to display the first (what i am doing is the same as switching tabs)
In the code below, switching could be implemented by clicking, but
The first content was not displayed at the initial stage and I asked a question.
If i know anyone, I would appreciate it if you could tell me.

▼ Referenced sites
https://jsfiddle.net/chrisvfritz/Lp20op9o/

<script src = "https://unpkg.com/vue"></script>

  
      <ul>
        <li
          v-for = "post in posts"
          v-bind: key = "post.id"
          v-bind: class = "{selected: post === selectedPost}"
                    v-on: click = "selectedPost = post"
        >
          {{post.title}}
        </Li>
      </ul>
      
          
           {{selectedPost.title}} 
           
        
      
    
new Vue ({
  el: '# dynamic-component-demo',
  data: {
    posts: [{
      id: 1,
      title: 'Title 1',
      content: '<p>Body 1</p>'
    }, {
      id: 2,
      title: 'Title 2',
      content: '<p>Body 2</p>'
    }, {
      id: 3,
      title: 'Title 3',
      content: '<p>Body 3</p>'
    }],
    selectedPost: 0
  }
})
  • Answer # 1

    The reason why it is not displayed first is becauseselectedPostcontains0withNumber.
    And even if you reference an object like~ .title, there is no value.

    I think there are various ways, but I think it is easy to understand how to use computed as follows.

    Demonstration → https://jsfiddle.net/b768m59s/

    
      
        
          

            {{post.title}}                                  {{selectedPost.title}}                        

    new Vue ({
      el: '# dynamic-component-demo',
      data: {
        posts: [{
          id: 1,
          title: 'Title 1',
          content: '

    Body 1

    '     }, {       id: 2,       title: 'Title 2',       content: '

    Body 2

    '     }, {       id: 3,       title: 'Title 3',       content: '

    Body 3

    '     }],     selectedNumber: 0   },   computed: {     selectedPost () {       return this.posts [this.selectedNumber]     }   } })