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

【问题标题】：How do you update a specific child element on click using Vue.js?如何使用 Vue.js 在点击时更新特定的子元素？
【发布时间】：2016-12-23 13:18:21
【问题描述】：

如果您有一个附有点击事件的项目列表，您如何使用 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

【问题讨论】：

你想在那个 div 中改变什么？
将反馈文本添加到相关的 .feedback p 标签。因此，如果他们点击第二个选项，相关的反馈 div 将具有“第二个选项反馈”。

标签： javascript vue.js vuejs2

【解决方案1】：

我认为您可以在选项对象中设置另一个布尔属性，例如 showFeedback，然后只需更改其值即可显示反馈！

最好在代码中显示:)

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>

【讨论】：

我喜欢这个想法，但是，通过我的实际实现，我正在从服务器获取反馈。这是一个测验，我不想将答案存储在 DOM 中，因为人们可以检查并找到它。
Hmmmmmm，你不能在获取数据时执行 options.map() 吗？这样您就可以将此字段设置为对象 :)

【解决方案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

【讨论】：