Tengo un componente web vue con un accesorio numérico y, a través de algunas pruebas, descubrí que hacer algo como esto no funciona para establecer el valor del accesorio...
<script src="https://unpkg.com/vue@2"></script> <script src="./mycomponents.js"></script> <my-component myProp="40"></my-component>Pero esto será...
<script src="https://unpkg.com/vue@2"></script> <script src="./mycomponents.js"></script> <my-component id="mycmp"></my-component> <script type="module"> const myComponent = document.getElementById("mycmp"); myComponent.myProp = 40; </script>Ejemplo de código de componente:
<template> <p>{{myProp}}</p> </template> <script> export default { name: 'MyComponent', props: { myProp: { type: Number, default: 0 } } } </script>Supongo que tal vez esto sea una cuestión de tiempo, como cuando se hace a través de los atributos html, ¿el componente aún no ha terminado de inicializarse correctamente? Aunque todos los ejemplos que vi de otras personas que usan componentes web vue parecían sugerir que este debería ser un caso de uso bastante básico. Con suerte, solo soy yo haciendo algo tonto.
Cualquier ayuda muy apreciada!
Los atributos de HTML a menudo no coinciden 1 a 1 con las propiedades de JavaScript. En este escenario, el atributo HTML de la traducción de propiedades de Vue.js es similar al de los atributos data-* .
Conversión de nombre
conversión
dash-styleacamelCaseUn nombre de atributo de datos personalizado se transforma en una clave para la entrada
DOMStringMapde la siguiente manera:
- Poner en minúsculas todas las letras mayúsculas ASCII (
AaZ);- Eliminar el prefijo
data-(incluido el guión);- Para cualquier guión (
U+002D) seguido de una letra minúscula ASCII deaa laz, elimine el guión y escriba la letra en mayúsculas;- Otros caracteres (incluidos otros guiones) no se modifican.
conversión de
camelCaseadash-styleLa transformación opuesta, que asigna una clave a un nombre de atributo, utiliza lo siguiente:
- Restricción: antes de la transformación, un guión no debe ir seguido inmediatamente de una letra minúscula ASCII de
aa laz;- Agregue el prefijo de
data-;- Agregue un guión antes de cualquier letra mayúscula ASCII de la
Aa laZ, luego escriba la letra en minúsculas;- Otros caracteres se dejan sin cambios.
Por ejemplo, un atributo
data-abc-defcorresponde adataset.abcDef.
Aplicando esto a su escenario, podemos omitir el paso 2 (la parte de data- ) y escribir el atributo así:
<my-component my-prop="40"></my-component>Puede intentar establecer el setAttribute para convertirlo en cadena:
<my-component></my-component> <script type="module"> const myComp= document.querySelector("my-component"); myComp.setAttribute("my-prop", JSON.stringify(40)); </script>luego, en su componente, reciba prop como cadena y conviértalo en número (o si necesita el objeto JSON. Analícelo):
<template> <p>{{ myPropNr }}</p> </template> props: { myProp: { type: String, default: 0 } }, computed: { myPropNr() { return Number(this.myProp) } }