Escenario del proyecto:
El mismo componente de Vue se usa en la misma página de edición, lo que da como resultado valores de transferencia de accesorios no válidos
Descripción del problema:
En una página de edición de artículos, es necesario mostrar y ocultar diferentes tipos de botones de carga para que los usuarios los carguen cambiando el tipo de artículo (audio/video). Por ejemplo, el siguiente código tendrá un problema extraño. Cuando cambio de modo_artículo de audio a video, el cambio de filtros no es válido:
// 音频组件
<upload-component
v-if="article_mode ==10"
:value.sync="article_audio"
:filters="{
mime_types : [
{
title : 'Mp3 files', extensions : 'mp3' }
],
max_file_size : '20mb'
}"
/>
}
// 视频组件
<upload-component
v-if="article_mode ==20"
:value.sync="article_video"
:filters="{
mime_types : [
{
title : 'Mp4 files', extensions : 'mp4' }
],
max_file_size : '30mb'
}"
/>
}
solución:
Agregar un :alcance clave
El atributo especial de clave se utiliza principalmente en el algoritmo DOM virtual de Vue para identificar VNodes al comparar nodos antiguos y nuevos. Si no usa claves, Vue usará un algoritmo que minimiza los elementos dinámicos e intenta modificar y reutilizar el mismo tipo de elementos tanto como sea posible. Al usar claves, reorganizará el orden de los elementos en función de los cambios clave y eliminará los elementos que no existen. Además, los elementos secundarios con el mismo elemento principal deben tener una clave única y las claves repetidas provocarán errores de representación.
// 音频组件
<upload-component
v-if="article_mode ==10"
:key="0" // 新增
:value.sync="article_audio"
:filters="{
mime_types : [
{
title : 'Mp3 files', extensions : 'mp3' }
],
max_file_size : '20mb'
}"
/>
}
// 视频组件
<upload-component
v-if="article_mode ==20"
:key="1" // 新增
:value.sync="article_video"
:filters="{
mime_types : [
{
title : 'Mp4 files', extensions : 'mp4' }
],
max_file_size : '30mb'
}"
/>
}