如何使用 Vue.js 在单击时更新特定的子元素？

Question

如果您有一个附加了点击事件的项目列表，您如何使用 Vue.js (2.0) 将特定更改应用于点击的子元素？这是一个例子：

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
      //...
    }
  }

});

所以这将显示一个项目列表。例如，当您单击第三项时，我如何使用相关的反馈文本更新相应的 .feedback 块？这是 JS Bin 中的代码：https://jsbin.com/ricewuf/edit?html,js,output

Answer 1

我想你可以在选项对象上设置另一个布尔属性，比如 showFeedback，然后只改变它的值来显示反馈！

最好在代码中展示:)

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>

Answer 2

您仍然可以将原始事件传递给您的事件处理程序并使用它来查找 .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>

这是一些关于此的文档：https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers

如何使用 Vue.js 在单击时更新特定的子元素？

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

javascript

vue.js

vuejs2