1

¿Cómo puedo crear un snippet con Vue.js para una pregunta en Stack Overflow?

He visto muchas preguntas de Vue, pero no consigo crear el snippet y que funcione, al menos cuando necesito que se importe un component. En mi caso necesito importar o usar lodash y vue-select.

Lo he intentado así, y de otras formas, pero soy incapaz de hallar la forma:

En HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>LOdash with Vue2</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>Lodash with method</h2>
    <v-select ref="vselect" :options="sortMainCategories" label="name"></v-select>
  </div>
</body>
</html>

En JS:

import vSelect from 'vue-select';
import _ from 'lodash';

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      //select: "Todos los anuncios",
      categories: [
        {
            id: 1,
            name: "Sin clasificar",
            parent_id: null,
            code: 0,
            additional: null
        },
        {
            id: 2,
            name: "Todos los anuncios",
            parent_id: null,
            code: 99,
            additional: null
        },
        {
            id: 3,
            name: "Inmobiliaria",
            parent_id: 0,
            code: 2,
            additional: null
        },
        {
            id: 4,
            name: "Motor",
            parent_id: 0,
            code: 3,
            additional: null
        },
        {
            id: 5,
            name: "Casa Jardín",
            parent_id: 0,
            code: 4,
            additional: null
        },
        {
            id: 6,
            name: "Moda y Belleza",
            parent_id: 0,
            code: 5,
            additional: null
        },
        {
            id: 16,
            name: "Vacaciones",
            parent_id: 2,
            code: 201,
            additional: null
        },
        {
            id: 17,
            name: "Casa rurales",
            parent_id: 2,
            code: 202,
            additional: null
        },
        {
            id: 18,
            name: "Garajes y trasteros",
            parent_id: 2,
            code: 203,
            additional: null
        },
        {
            id: 24,
            name: "Accesorios coches",
            parent_id: 3,
            code: 301,
            additional: null
        },
        {
            id: 25,
            name: "Accesorios motos",
            parent_id: 3,
            code: 302,
            additional: null
        },
        {
            id: 26,
            name: "Autocaravanas",
            parent_id: 3,
            code: 303,
            additional: null
        },
        {
            id: 27,
            name: "Coches",
            parent_id: 3,
            code: 304,
            additional: null
        },
        {
            id: 28,
            name: "De época",
            parent_id: 3,
            code: 305,
            additional: null
        },
        {
            id: 29,
            name: "Sin carnet",
            parent_id: 3,
            code: 306,
            additional: null
        },
        {
            id: 30,
            name: "Motos",
            parent_id: 3,
            code: 307,
            additional: null
        },
        {
            id: 40,
            name: "Muebles",
            parent_id: 4,
            code: 407,
            additional: null
        },
        {
            id: 41,
            name: "Ropa del hogar",
            parent_id: 4,
            code: 408,
            additional: null
        },
        {
            id: 42,
            name: "Vajilla y menaje",
            parent_id: 4,
            code: 409,
            additional: null
        }
      ]
    }
  },
  computed: {
    sortMainCategories: function() {
        var categories = this.mainCategory;
        return _.orderBy(categories, 'name')
    },
    mainCategory: function() {
        return this.categories.filter(function (category) {
            return (category.parent_id === 0 || category.code === 99)
        })
    }
  }
})
4
  • Voy a migrar esta pregunta a meta porque es el sitio donde corresponde (una pregunta sobre el sitio en sí).
    – Alvaro Montoro Moderador
    Commented el 1 ene. 2018 a las 19:53
  • @AlvaroMontoro me parece que la pregunta no trata de los Snippets de Stack Overflow en español. Considero que esta pregunta no debió haber sido migrada y ser cerrada por ser demasiado amplia o estar basada en opiniones.
    – Phi
    Commented el 2 ene. 2018 a las 3:42
  • @Flxtr quizás yo la he interpretado mal, pero parece una pregunta sobre cómo crear un snippet con vue.js en stack overflow que sería un tema de meta. Si está bien, vota por cerrar la pregunta (que cancelará la migración) y que la comunidad decida.
    – Alvaro Montoro Moderador
    Commented el 2 ene. 2018 a las 9:08
  • Efectivamente se trata de como crear un snippet de codigo, para poder hacer una pregunta en stackoverflow, junto al codigo que se trata de pedir ayuda.
    – abkrim
    Commented el 2 ene. 2018 a las 9:10

1 respuesta 1

4

Pregunta similar: Uso de fragmentos o bloques de código ejecutable (code snippet) cuando respondemos en SO

Para añadir un snippet debes pulsar en el ícono de añadir lo siguiente:

  • fragmento de JavaScript/HTML/CSS (icono para añadir código) o alternativamente pulsar Ctrl+M.

Nota: Al agregar los snippets, el orden de los lenguajes en el código es JavaScript, CSS y HTML, a pesar e que al pasar el ratón por el ícono el recuadro lo muestre en un orden diferente.

Entonces, se abrirá una ventana que permitirá añadir código HTML, CSS y/o JavaScript:

Ventana de código

De izquierda a derecha y de arriba a abajo, las cajas, son para añadir HTML, CSS, JavaScript y para ver el resultado.

Ahora, para usar Vue.js en el snippet, debes añadir un enlace a un CDN con la librería de Vue.js en la parte de HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.min.js"></script>

En ese caso estarías enlazando la versión 2.5.6, pero puedes encontrar otras versiones de Vue.js en Cloudflare.

Puedes basarte en el snippet de preguntas que ya existen para empezar a montar el tuyo. Por ejemplo, yo me basé en esta pregunta que tiene un snippet que usa Vue.js y funciona bien.

1
  • Eso es lo que buscaba pues vi varios pero no veia el codigo o no tenia claro el formato, aunque aun me quedan dudas pues tratode usar libreria externa como axios, pero me da que axios no es soportado.. otra como lodash si me funcionaron, al intentarlo. Gracias.
    – abkrim
    Commented el 2 ene. 2018 a las 9:12

Debes iniciar sesión para responder a esta pregunta.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta .