Vue 如何根据对象数据为 option 设置"selected"

Question

我在SO中搜索了一点，但找不到我想要的东西。

因此，我有一种排序函数。我有一个日期范围数组(PayPeriods(，我可以将其渲染到用v-for渲染的带有选项的select组件中。像这样：

<time-clock-group-component
v-for="(timeClockGroup, index) in timeClockGroups"
:key="`timeClockGroup-${index}`"
:timeClocks="timeClockGroups[index]"
/>

组件是基本的：

<template>
<option>{{ Start }} - {{ End }}</option>
</template>

我需要做的是使最后一个组件呈现为具有"；选择"；选项，这样它就可以加载最新的数据，而无需用户选择。我在PayPeriod对象上设置了一个key:value作为bool，我希望在这种情况下使用它，但我不知道如何设置它。我试着安装了一个这样的支票：

if (this.payPeriod.Current) {
document.getElementById(
"ppc"
).innerHTML = `<option selected>{{ Start }} - {{ End }}</option>`;
}

但上面写着"；无法设置null"的属性"innerHTML"；我想这是由于Vue的某些原因？

Answer 1

将document与Vue混合通常不是一个好主意。

但是，据我所知，你想自动选择最后一个元素。

您可以在TimeClockGroupComponent中创建一个prop，例如具有布尔值的selected。然后，我们可以计算该数组的最后一个元素，以将所选道具集传递为true。

一些变化可能是：

<!-- parent.vue -->
<time-clock-group-component
v-for="(timeClockGroup, index) in timeClockGroups"
:key="`timeClockGroup-${index}`"
:timeClocks="timeClockGroups[index]",
:selected="timeClockGroups.length === i + 1"
/>

和：

// TimeClockGroupComponent.vue
<template>
<option :selected="selected">{{ Start }} - {{ End }}</option>
</template>
// ...
props: {
// ...
selected: {
type: Boolean,
default: () => false
}
}