0
103
VistasUso de componentes Vue con accesorios
Estoy haciendo un curso de la escuela Vue y estoy tratando de hacer un pequeño ejercicio con componentes y accesorios. Estoy tratando de construir un botón simple y un componente de párrafo que tome el contenido de un párrafo como el valor de la propiedad:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Click-Counter</title> </head> <body> <div id="app"> <h1>Vue.js Components Fundamentals</h1> <click-counter click-title="The first counter is:"></click-counter> <click-counter click-title="The second counter is:"></click-counter> <click-counter click-title="The Third counter is:"></click-counter> </div> <script type="text/x-template" id="click-counter-template"> <div> <p>{{ click-title }}</p> <button v-on:click="count++"> {{ count }} </button> </div> </script> <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html>aplicación.js
Vue.component('click-counter', { props: { 'click-title': { type: String, required: true } }, data () { return { count: 0 } }, template: '#click-counter-template', }) new Vue({ el: '#app' })La cuestión es que el contenido del accesorio de título de clic se evalúa pero no se procesa.
Captura de pantalla de la extensión Vue
Captura de pantalla del contenido de la página.
1 Respuestas
Responde la pregunta0
El problema era que, para que Vue entendiera que el accesorio en el archivo app.js y el archivo index.html son lo mismo, debe usar camelCase en app.js (y cuando define el componente) y kebab-case en index.html (en las instancias del componente).
En resumen, cambié esto:
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <!-- Some Head Info --> </head> <body> <div id="app"> <h1>Vue.js Components Fundamentals</h1> <!-- USE kebab-case HERE (click-title) --> <click-counter click-title="The first counter is:"></click-counter> <click-counter click-title="The second counter is:"></click-counter> <click-counter click-title="The Third counter is:"></click-counter> </div> <script type="text/x-template" id="click-counter-template"> <div> <!-- USE camelCase HERE (clickTitle) --> <p>{{ clickTitle }}</p> <button v-on:click="count++"> {{ count }} </button> </div> </script> <!-- More stuff --> </body> </html>aplicación.js:
Vue.component('click-counter', { props: { // USE camelCase HERE (clickTitle) 'clickTitle': { // Atributes } }, data () { // Variables }, // Template }) // New Vue