如果您有一个附加了点击事件的项目列表，您如何使用 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 block ？这是 JS Bin 中的代码:https://jsbin.com/ricewuf/edit?html,js,output
最佳答案
我认为你可以在选项对象上设置另一个 bool 属性，比如 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>
关于javascript - 如何使用 Vue.js 在单击时更新特定的子元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41302235/