How do you update a specific child element on click using Vue.js?

Question

If you've got a list of items with click events attached, how do you apply a specific change to a clicked child element using Vue.js (2.0)? Here's an example:

HTML:

<div id="root">

    <div class="selection">
      <div class="option" v-for="option in options" @click="processSelection(option)">
        <p class="text">{{ option.text }}</p>
        <p class="feedback"></p>
      </div>
    </div>

</div>

Javascript:

new Vue({

  el: '#root',

  data: {
    options: [
      { text: 'First option', feedback: 'First option feedback' },
      { text: 'Second option', feedback: 'Second option feedback' },
      { text: 'Third option', feedback: 'Third option feedback' },
      { text: 'Fourth option', feedback: 'Fourth option feedback' },
    ]
  },

  methods: {
    processSelection(option) {
      alert(option.text + ' was clicked');

      //Update the respective feedback div
      //...
    }
  }

});

So this will display a list of items. When you click, say, the third item, how can I update the corresponding .feedback block with the related feedback text? Here's the code in a JS Bin: https://jsbin.com/ricewuf/edit?html,js,output

Add the feedback text to the related .feedback p tag. So, if they click the second option, the related feedback div would have 'Second option feedback'. — Dan Murfitt
– Dan Murfitt, Commented Dec 23, 2016 at 13:26

Rômulo M. Farias · Accepted Answer · 2016-12-23 13:27:52Z

4

I think you can let another boolean attribute at the option object, something like showFeedback, and then just change its value to show the feedback!

It's better show in code :)

JS

https://jsbin.com/diquwemiti/edit?html,js,output

new Vue({

  el: '#root',

  data: {
    options: [
      { text: 'First option', feedback: 'First option feedback', showFeedback: false},
      { text: 'Second option', feedback: 'Second option feedback', showFeedback: false },
      { text: 'Third option', feedback: 'Third option feedback', showFeedback: false },
      { text: 'Fourth option', feedback: 'Fourth option feedback', showFeedback: false },
    ]
  },

  methods: {
    processSelection(option) {
      option.showFeedback = true
    }
  }

});

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>


  <div id="root">

    <div class="selection">
      <div class="option" v-for="option in options" @click="processSelection(option)">
        <p class="text">{{ option.text }}</p>
        <p class="feedback" v-if="option.showFeedback">{{ option.feedback }}</p>
      </div>
    </div>

  </div>

</body>
</html>

answered Dec 23, 2016 at 13:27

Rômulo M. Farias

1,5231 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Murfitt Over a year ago

I like this idea, however, with my actual implementation I'm fetching the feedback from the server. It's for a quiz, and I don't want to store the answer in the DOM, as people could inspect and find it out.

Rômulo M. Farias Over a year ago

Hmmmmmm, can't you do options.map() when you fetch the data? This way you can set this field to the object :)

tony19 · Accepted Answer · 2022-07-15 01:39:32Z

You can still pass the original event to your event handler and use it to find the .feedback div :

new Vue({

  el: '#root',

  data: {
    options: [{
      text: 'First option',
      feedback: 'First option feedback'
    }, {
      text: 'Second option',
      feedback: 'Second option feedback'
    }, {
      text: 'Third option',
      feedback: 'Third option feedback'
    }, {
      text: 'Fourth option',
      feedback: 'Fourth option feedback'
    }, ]
  },

  methods: {
    processSelection(option, e) {
      var target = e.currentTarget;
      var feedback = target.querySelector('.feedback');
      feedback.innerHTML = option.feedback;
    }
  }

});

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

<div id="root">

  <div class="selection">
    <div class="option" v-for="option in options" @click="processSelection(option, $event)">
      <p class="text">{{ option.text }}</p>
      <p class="feedback"></p>
    </div>
  </div>

</div>

Here is some documentation about this : https://v2.vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers

Collectives™ on Stack Overflow

How do you update a specific child element on click using Vue.js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related