¿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)
})
}
}
})