Cómo el código de comentario en un vue.js archivo?

Tengo la necesidad de insertar un comentario en el interior de un vue.js archivo para futuras referencias, pero no encuentro la forma de hacerlo en los docs.

He intentado //, /**/, {{ -- -- }}, y {# #}, pero ninguno de ellos parece funcionar.

Estoy usando Laravel blade. Así que esta es la sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{ --I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true-- }}

        <div class="media-left">
            <a href="#">
                <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
            </a>
        </div>
        <div class="media-body">
            <strong>{{ post.user.name }}</strong>
            <p>{{post.body}}</p>
            <p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
        </div>
    </div>
</template> 

¿Alguien sabe cómo insertar un comentario y /o cómo comentar fragmentos de código?

Si usted está buscando para multi-línea de comentarios, el estándar html comentario: <!-- -->. Pero suena como que usted está buscando comentarios en línea?
Ahh, se me olvidaba que probarlo. De hecho, es HTML código! Thnx
Por defecto HTML comentarios son eliminados por la vue vuejs.org/v2/api/#comments

OriginalEl autor Pathros | 2016-12-19

6 respuestas

  1. 74

    Que te gustaría utilizar el estándar de HTML comentarios en el <template> etiqueta en su situación. Van a ser despojado de la salida, así que es agradable.

    <!-- Comment -->
    
    Que hizo el truco

    OriginalEl autor Bill Criswell

  2. 10

    Como proyecto de Ley Criswell dijo que podemos usar HTML comentario sintaxis.

    <!-- Comment -->
    

    Pero, va a trabajar fuera de la etiqueta de plantilla demasiado,
    comentario.vue

    <!-- Testing comments, this will work too. -->
    
    <template>
        <!-- This will work too -->
    
        <div>
            <!-- Html Comments -->
            Hello There!
        </div>
    </template>
    
    <style><style>
    
    <!-- Commenting here -->
    
    <script>
        //Commenting only 1 line
    
        /**
          * Commenting multiple lines
          * Commenting multiple lines
          */
    </script>
    
    Esto se traduce en “testigo Inesperado (1:1)” con Vue 2.5.13.
    Yo solía comentar fuera de la apoyó raíz de las etiquetas y encontrado para causar problemas en función del contenido de los comentarios. Deseo vue admiten comentarios fuera de la raíz de las etiquetas porque es la más sensata para la creación de archivos léame y tal, pero bueno.
    En lugar de utilizar los comentarios fuera de la apoyó raíz de las pestañas, el uso válido de etiquetas de allí. <comment>Commenting here</comment. Usted tendrá que añadir estos a su webpack config. vue-loader.vuejs.org/guide/custom-blocks.html#example

    OriginalEl autor Vaisakh Rajagopal

  3. 1

    Soy noob en Vue.js pero // debe funcionar porque el código javascript de todos modos.
    Buscando en la documentación me parece que este ejemplo. Si usted mira las 2 primeras líneas de javascript que va a ver los comentarios con //.

    ejemplo en javascript del archivo vinculado:

    //Full spec-compliant TodoMVC with localStorage persistence
    //and hash-based routing in ~120 effective lines of JavaScript.
    
    ...
    

    OriginalEl autor Juan

  4. 1

    Me di cuenta de que no se puede comentar cuando usted está dentro de una etiqueta:

    <!-- make sure it is outside a tag -->
    
    <autocomplete
    <!-- you can't place the comment out in here -->
    >
    </autocomplete>
    

    OriginalEl autor Juan Vaca

  5. 1

    Si usted necesita para comentar de todo un bloque html puede utilizar v-if="false" a “ciegas” vue para el fragmento de código que sigue.

    <template>
    <div>
        Hello
        <div v-if="false">
            This part will be skipped.
        </div>
        World!
    </div>
    </template>
    

    OriginalEl autor Michael Ekoka

  6. 1

    Sólo he probado este:

    <template>
        {{ /* this is a comment */}}
        <h1>Hello world</h1>
    </template>
    

    OriginalEl autor Fulldump

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *