VueJS2 和 Lodash4:如何在 HTML 表格中将 v-for 与另一个 v-for 嵌套? [英] VueJS2 and Lodash4: How to nest v-for with another v-for in an HTML table?
问题描述
我无法在我的 HTML 表格中正确显示一些计算数据.如何用我的 filteredFieldsWithOldValues() 方法中的值替换表中的 x 占位符内容?
让我解释一下.
我有一些这样的数据:
Codesandbox 工作演示:
但是，我需要用附加了 _old 的键中的值替换表中的 x 占位符.我试着这样做:
filteredFieldsWithOldValues() {const fieldsWithOld = pickBy(this.country, (v, k) => k.endsWith(_old"));返回字段WithOld；},然后在我的 HTML 表格中，我将另一个 v-for 放在 <tr> 的元素上，如下所示:
{{ X }}</td>因此，更新后的 HTML 如下所示:
<头><tr><th scope=col">Field</th><th范围=col">旧</th><th scope=col">New</th></tr></thead>{{ X }}</td><td>{{值}}</td></tr></tbody>
但现在，该表无法正确显示值.
如何正确显示 _old 键中的值?
解决方案 试试这个
<头><tr><th scope=col">Field</th><th范围=col">旧</th><th scope=col">New</th></tr></thead>I am having trouble getting some computed data to display properly in my HTML table. How can I replace the x placeholder content in the table with the values from my filteredFieldsWithOldValues() method?
Let me explain.
I have some data like so:
Codesandbox working demo: https://codesandbox.io/s/country-old-and-new-forked-s4zh7?file=/src/App.vue:51-599
{
"name": "Canada",
"entryType": 2,
"shortName": "CanadaEH",
"shortName_old": "Canada",
"fullName": "The NEW Republic of Canada",
"fullName_old": "The Republic of Canada",
"entryNotes": "Changed the short name and full name ",
"entryNotes_old": "fixed typo on short name"
}
Using lodash, I am filtering out fields that have the string _old appended to them and also filtering out some additional fields I do not want to show in the data. Overall, it looks like this:
filteredFieldsWithNewValues() {
const fieldsWithNoOldString = omitBy(this.country, (v, k) =>
k.endsWith("_old")
);
const omittedFields = omit(fieldsWithNoOldString, [
"updateStatus",
"entryType",
"name",
]);
return omittedFields;
},
This works fine and my data is displaying properly in the HTML table:
However, I need to replace the x placeholder in the table with the values from the keys that have _old appended to them. I tried to do it like so:
filteredFieldsWithOldValues() {
const fieldsWithOld = pickBy(this.country, (v, k) => k.endsWith("_old"));
return fieldsWithOld;
},
And then in my HTML table I put another v-for on the <tr>'s element like so:
<td v-for="(x, index) in filteredFieldsWithOldValues" :key="index">
{{ x }}
</td>
So, the updated HTML looks like so:
<table class="table">
<thead>
<tr>
<th scope="col">Field</th>
<th scope="col">Old</th>
<th scope="col">New</th>
</tr>
</thead>
<tbody>
<tr
v-for="(value, field, index) in filteredFieldsWithNewValues"
:key="index"
>
<th scope="row">{{ field }}</th>
<td v-for="(x, index) in filteredFieldsWithOldValues" :key="index">
{{ x }}
</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
But now, the table is not displaying the values correctly.
How can I correctly show the values from the keys with _old correctly?
解决方案 Try this
<table class="table">
<thead>
<tr>
<th scope="col">Field</th>
<th scope="col">Old</th>
<th scope="col">New</th>
</tr>
</thead>
<tbody>
<tr
v-for="(value, field, index) in filteredFieldsWithNewValues"
:key="index"
>
<th scope="row">{{ field }}</th>
<td>{{ filteredFieldsWithOldValues[field + '_old'] }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
这篇关于VueJS2 和 Lodash4:如何在 HTML 表格中将 v-for 与另一个 v-for 嵌套?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆