Vue.js 如何使用函数为下拉文本创建v形？

我想做一个文本更正，在这里我可以点击错误的单词并从列表中选择一个更正（有点像语法）

这个简单的例子应该能帮助你理解这个想法。假设我有一个从服务器返回的对象列表：

data: {
 objects: [
  {
   word: "This",
   val:  0.1,
   corrections: {"that", "Those"}
  },
  {
   word: "kat",
   val:  0.9,
   corrections: {"cat", "cats", "dogs", "animals"}
  }
 ]
}

现在我想写一个v型，它将：

• 显示所有单词，就像它们是普通文本一样（例如“This kat”）
• 对于

  val<0.5

  的单词，只需显示一个

  word

• 对于

  val>=0.5

  的单词，显示一个带有红色下划线的

  单词

  ，并且能够单击并查看包含所有

  更正的下拉列表

• 在下拉列表中选择一个选项后，更改对象

  word

  的值

最小可复制（不工作）示例：

Vue.component（'post-list'{
数据：函数（）{
返回{
对象：[{
字：“这个”，
瓦尔：0.1，
更正：[
“那”，
“那些”
]},
{
字：“凯特”，
瓦尔：0.9，
更正：[
“猫”，
“猫”，
“狗”，
“动物”
]}
]
}
},
});
新Vue({
el:“#vue应用程序”
});

{{object.word}
那么基本上你是在要求我们在大约10分钟内为你创建一份“语法”副本

好的，接受挑战。我创建了一个有效但粗略的示例，为您提供了一个起点，也许还有一些关于如何改进的想法。请记住，这不是最好的解决方案，因为我没有花太多时间和精力：

演示
另外，我会将
getFormattedData（）
方法移动到服务器上，这样您就可以获得带有
下划线的
属性以及
val
和
更正的格式化数据，而不是在客户端重新计算它


{{correction}}
{{object.word}

数据（）{
返回{
更正列表可见：false，
更正列表项：[]，
activeObject:{}，
对象：[
{
字：“这个”，
瓦尔：0.1，
更正：[“那”、“那些”]
},
{
字：“凯特”，
瓦尔：0.9，
更正：[“猫”、“猫”、“狗”、“动物”]
},
{
字：“是”，
瓦尔：0.1，
更正：[]
},
{
字：“可爱”，
瓦尔：0.2，
更正：[]
},
]
}
},
计算：{
getFormattedData（）{
让结果=[]
for（此.objects的常量项）{
让对象={}
如果（项目值<0.5）{
object.word=item.word
object.下划线=false
object.corrections=[]
}
否则如果（item.val>=0.5）{
object.word=item.word
object.下划线=true
object.corrections=item.corrections
}
结果。推送（对象）
}
返回结果
}
},
方法：{
添加空间（索引）{
返回索引！==（this.getFormattedData.length-1）
},
toggleCorrectionsList（对象）{
if（带下划线的对象）{
this.correctionsListItems=object.corrections
this.activeObject=object
this.correctionListIsVisible=true
}
否则{
this.activeObject={}
}
},
应用更正（更正）{
this.activeObject.word=更正
this.activeObject.下划线=false
}
}
能否请您发布一份您的尝试报告，并具体说明您被困的地方。人们会很乐意提供帮助。是的，我会这样做，谢谢你的评论。你要求的技术实现相当多。您可能会为此专门制作一两个新组件。我会把它分割成一个组件，呈现一个叠加/包装器（带有红色下划线），点击时会显示一个菜单，一个组件用来检查你的单词是应该用这个组件包装还是用一个普通的组件包装（这个是v型的），可能还有一个单独的组件来处理更正菜单。PS：您可能希望更正为数组而不是对象。