vue.js - 如何使用函数制作 v-for 下拉文本?
问题描述
我想做一个文本更正,我可以点击错误的单词并从列表中选择一个更正(有点像 Grammarly)。
这个简单的例子应该可以帮助你理解这个想法。假设我有一个从服务器返回的对象列表:
data: {
objects: [
{
word: "This",
val: 0.1,
corrections: {"that", "Those"}
},
{
word: "kat",
val: 0.9,
corrections: {"cat", "cats", "dogs", "animals"}
}
]
}
现在我想写一个 v-for 将:
- 显示所有单词,就像它们是常规文本一样(例如“This kat”)
- 对于
val < 0.5
仅显示 a 的单词word
- 对于
val >= 0.5
显示word
带有红色下划线的单词,并且能够单击并查看包含所有内容的下拉列表corrections
word
在下拉列表中选择一个选项后更改对象的值。
最小可重现(不工作)示例:
Vue.component('post-list', {
data: function() {
return {
objects: [{
word: "This",
val: 0.1,
corrections: [
"that",
"Those"
]},
{
word: "kat",
val: 0.9,
corrections: [
"cat",
"cats",
"dogs",
"animals"
]}
]
}
},
});
new Vue({
el: '#vue-app'
});
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="vue-app" class="container">
<post-list inline-template>
<div>
<template class="post" v-for="object in objects">
{{ object.word }}
</template>
</div>
</post-list>
</div>
解决方案
所以基本上你是在要求我们在 10 分钟内为你创建一个“Grammarly”的副本?
好的,接受挑战。我创建了一个可行但粗略的示例,为您提供一个起点,也许还有一些关于如何改进它的想法。请记住,这不是最好的解决方案,因为我没有花很多时间和思考:
演示https://codepen.io/aQW5z9fe/pen/MWaQjdX
此外,我会将getFormattedData()
方法移动到服务器,以便您获得带有underlined
属性的格式化数据,val
而corrections
不是在客户端重新计算它。
<v-menu
v-model="correctionsListIsVisible"
>
<v-list dense>
<v-list-item
v-for="(correction, index) in correctionsListItems"
:key="index"
@click="applyCorrection(correction)"
>
<v-list-item-content>
<v-list-item-title>
{{correction}}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
<div class="flex">
<div v-for="(object, index) in getFormattedData" class="flex">
<div
@click="toggleCorrectionsList(object)"
:class="{'underlined': object.underlined}"
id="word"
>{{ object.word }}
</div>
<div v-if="addSpace(index)"> </div>
</div>
</div>
data () {
return {
correctionsListIsVisible: false,
correctionsListItems: [],
activeObject: {},
objects: [
{
word: "This",
val: 0.1,
corrections: ["that", "Those"]
},
{
word: "kat",
val: 0.9,
corrections: ["cat", "cats", "dogs", "animals"]
},
{
word: "is",
val: 0.1,
corrections: []
},
{
word: "cute",
val: 0.2,
corrections: []
},
]
}
},
computed: {
getFormattedData() {
let result = []
for (const item of this.objects) {
let object = {}
if (item.val < 0.5) {
object.word = item.word
object.underlined = false
object.corrections = []
}
else if (item.val >= 0.5) {
object.word = item.word
object.underlined = true
object.corrections = item.corrections
}
result.push(object)
}
return result
}
},
methods: {
addSpace (index) {
return index !== (this.getFormattedData.length - 1)
},
toggleCorrectionsList (object) {
if (object.underlined) {
this.correctionsListItems = object.corrections
this.activeObject = object
this.correctionsListIsVisible = true
}
else {
this.activeObject = {}
}
},
applyCorrection (correction) {
this.activeObject.word = correction
this.activeObject.underlined = false
}
}
推荐阅读
- scala - Scala Action定义中“=>”之前的变量是什么意思?
- javascript - 更改按钮 onclick 功能时设置参数?
- javascript - 排队遇到问题
- c - 多行字符串输入
- angularjs - 使用 AngularJS 重定向到不同页面的特定部分
- python-3.x - 如何使用 matplotlib 修复条形图中被覆盖的值?
- python - Python http.client.RemoteDisconnected
- vba - 将工作表名称分配给函数/子参数
- android - 试图将图像保存到画廊
- twitter-bootstrap - 选择输入焦点上的第一个输入组项