I have this HTML code:
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
How do I indent the return in the computed section properly to look like this in Vim?
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
What do I need to change in my Vim or WebStorm settings so that when I select everything in visual mode and press = it indents properly?
Related
HTML
<script type="text/javascript" src="/static/opt/require.js" data-main="/static/opt/demo"></script>
<script type="text/javascript" src="/static/opt/demo.js"></script>
<script src="/static/opt/monaco-editor/package/min/vs/loader.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px">
<div class="col-md-4 col-sm-4 col-xs-4" style="padding: 0;display: inline-flex;margin-left: 175px">
<div id="input_editor" ></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-left:165px;display: inline-flex">
<div id="show_editor" ></div>
</div>
</div>
demo.js
require.config({paths:{'vs':'/static/opt/monaco-editor/package/min/vs'}});
$(document).ready(function () {
require(['vs/editor/editor.main'], function(){
var input_editor = monaco.editor.create(document.getElementById("input_editor"), {
value: "aaa"
})
})
require(['vs/editor/editor.main'], function(){
var show_editor = monaco.editor.create(document.getElementById("show_editor"), {
value: "bbbbb"
})
})
})
Is there anything wrong in my code? How should I use monaco editor in HTML?
And is there any api to color somelines red or green in the Monaca Editor?
Thanks
Just start a tutorial about Laravel 5.8 (from 0) and trying to add some JS to the project. Installed NodeJS: npm -v: 6.10.1; node -v: 12.6.0; Then install npm in the project and use npm run watch. After all change ExampleComponent.vue to MyButton.vue:
<template>
<div>
<button type="submit" class="my-button" v-text="test.name">My Button</button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
axios.post('api/vue', {})
.then(response => {
this.test = response.data
});
},
data: function () {
return {
test: null,
}
},
props: [
'text'
]
}
</script>
<style>
.my-button{
background-color: #333333;
}
</style>
Register it in app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('my-button', require('./components/MyButton.vue').default);
let app;
app = new Vue({
el: '#app',
});
then in my view add:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<div id="app">
<my-button text="My new test button"></my-button>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
app.js component error
After all, I got the report from Laravel mix that build success:
DONE Compiled successfully in 16733ms 4:51:01 PM
But in the browser, I didn't see my button. I've tried cleaning the cache. But it doesn't help. Someone any suggestions?
Trying to create a dynamic dashboard with drag/drop and resize functionality. I want to add ASP server controls to 'grid-stack-item-content' and update them through Ajax after every 10 seconds.
https://jsfiddle.net/kLeu7y0h/
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
margin: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save</a>
<a class="btn btn-default" id="load-grid" href="#">Load</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear</a>
<input type="hidden" id="saved-data">
</div>
<br/>
<div class="grid-stack">
</div>
<div class="grid-stack-item" id="moni1">
<div class="grid-stack-item-content">
<p>ASP Panel A</p>
</div>
</div>
<div class="grid-stack-item" id="moni2">
<div class="grid-stack-item-content">
<p>ASP Panel B</p>
</div>
</div>
<div class="grid-stack-item" id="moni3">
<div class="grid-stack-item-content">
<p>ASP Panel C</p>
</div>
</div>
<div class="grid-stack-item" id="moni4">
<div class="grid-stack-item-content">
<p>ASP Panel D</p>
</div>
</div>
</div>
<script>
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{ x: 0, y: 0, width: 2, height: 2, id: moni1 },
{ x: 0, y: 1, width: 2, height: 2, id: moni2 },
{ x: 0, y: 2, width: 2, height: 2, id: moni3 },
{ x: 0, y: 3, width: 2, height: 2, id: moni4 },
];
var grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node) {
grid.addWidget(node.id,
node.x, node.y, node.width, node.height);
}, this);
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height,
id: node.id
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clearGrid = function () {
grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.loadGrid();
};
});
</script>
</body>
</html>
I need to load elements from JSON retrieved from database to form a layout. But every time I click on 'Load' button, maximum call stack size error displayed.
Making my first steps in vue. I am crashing in importing a .json file. This job concernes a small shop. Goal of this paragraph is to enter 4 products in the shop. The productfiles are imported with an Axios hook. But the Vue Dev Tool errors an undefined (see picture). When loading the website the div with v-else is automatically loaded.
The products.json files is nested in the same folder as index.html. http://localhost:8000/products.json shows me the .json file.
Here you 'll find all the code for this small shop. Even with a copy/paste of this code mine is not working. I also made it smaller with the relevant code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct"> <!--not working-->
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">
All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>
Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">
☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<!--skipped this part-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: []
},
order: []
},
products: [],
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
console.log(productsArray);
console.log(this.products);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
..
}
},
beforeCreate: function () { //#B
if (APP_LOG_LIFECYCLE_EVENTS) { //#B
..
},
created: function () {
axios.get('./products.json')
.then((response) => {
this.products = response.data.products;
console.log(this.products);
});
},
beforeMount: function () {
..
},
mounted: function () {
..
},
beforeUpdate: function () {
..
},
updated: function () {
..
},
beforeDestroyed: function () {
..
},
destroyed: function () {
..
}
});
</script>
</body>
</html>
I tried out the same code here and it's working fine, i had did axios call to this json file :
https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct">
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">Pet Depot Checkout</div>
<div class="panel-body">
<div class="form-group">
<div class="col-md-12">
<h4>
<strong>Enter Your Information</strong>
</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<strong>First Name:</strong>
<input v-model.trim="order.firstName" class="form-control" />
</div>
<div class="col-md-6">
<strong>Last Name:</strong>
<input v-model.trim="order.lastName" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>Address:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.address" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>City:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.city" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<strong>State:</strong>
<select v-model="order.state" class="form-control">
<option disabled value="">State</option>
<option v-for="(state, key) in states" v-bind:value="state">
{{key}}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<strong>Zip / Postal Code:</strong>
<input v-model.number="order.zip" class="form-control" type="number" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 boxes">
<input type="checkbox" id="gift" value="true" v-bind:true-value="order.sendGift" v-bind:false-value="order.dontSendGift" v-model="order.gift">
<label for="gift">Ship As Gift?</label>
</div>
</div>
<!-- end of form-group -->
<div class="form-group">
<div class="col-md-6 boxes">
<input type="radio" id="home" v-bind:value="order.home" v-model="order.method">
<label for="home">Home</label>
<input type="radio" id="business" v-bind:value="order.business" v-model="order.method">
<label for="business">Business</label>
</div>
</div>
<!-- end of form-group-->
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of form-group-->
<div class="col-md-12 verify">
<pre>
First Name: {{order.firstName}}
Last Name: {{order.lastName}}
Address: {{order.address}}
City: {{order.city}}
Zip: {{order.zip}}
State: {{order.state}}
Method: {{order.method}}
Gift: {{order.gift}}
</pre>
</div>
<!-- end of col-md-12 verify-->
</div>
<!--end of panel-body-->
</div>
<!--end of panel panel-info-->
</div>
<!--end of col-md-10 col-md-offset-1-->
</div>
<!--end of row-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: {
AL: 'Alabama',
AK: 'Alaska',
AR: 'Arizona',
CA: 'California',
NV: 'Nevada'
},
order: {
firstName: '',
lastName: '',
address: '',
city: '',
zip: '',
state: '',
method: 'Home Address',
business: 'Business Address',
home: 'Home Address',
gift: '',
sendGift: 'Send As A Gift',
dontSendGift: 'Do Not Send As A Gift'
},
products: {},
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
if (!parseInt(price)) {
return "";
} //#C
if (price > 99999) { //#D
var priceString = (price / 100).toFixed(2); //#E
var priceArray = priceString.split("").reverse(); //#F
var index = 3; //#F
while (priceArray.length > index + 3) { //#F
priceArray.splice(index + 3, 0, ","); //#F
index += 4; //#F
} //#F
return "$" + priceArray.reverse().join(""); //#G
} else {
return "$" + (price / 100).toFixed(2); //#H
}
}
},
created: function() { //#C
axios.get('https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json')
.then((response) => {
this.products = response.data.products;
// console.log(this.products);
});
}
});
</script>
</body>
</html>
I am new to Vue.js. Very new so this question might sound a lot like a first graders. Forgive me.
I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue) and let the rendering of the look/feel of the characters be done using Character.vue. The characters are created and added to the array and can be retrieved properly. Only thing is...Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined.
Help me?
Attaching files
App.vue
<template>
<div>
<div class='gameHeader'>
<h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
<div class='gameMessage' v-for="msg in gameMessages">
{{ msg }}
</div>
</div>
<div class='gameMain'>
<button #click="rollNewCharacter">Roll New</button>
<div class="playerParty">
<character v-for="p in playerParty"></character>
</div>
<div class="computerParty">
<character v-for="c in computerParty"></character>
</div>
</div>
<div class='gameFooter'>
{{ gameFooter }}
</div>
</div>
</template>
<script>
import Character from "./assets/components/Character.vue";
export default {
components: { 'character': Character },
data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[], playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
rollNewCharacter() {
var c = Character;
c.name = 'Usman';
c.type = 'Warrior';
c.mana = 100;
c.health = 100;
c.totalHealth = 100;
c.totalMana = 100;
console.log(c.name);
this.playerParty.push(c);
console.log(this.playerParty[0].name);
//this.computerParty.push(chr2);
}
}
}
</script>
Character.vue
<template>
<div class="character">
<span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
<script>
export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
</script>
<style>
</style>
You should pass a prop when using the character component:
<character :character="p" v-for="p in playerParty"></character>
I have updated the character to receive only one prop:
export default {
props: [ 'character' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
And this is the character component template with the new prop:
<template>
<div class="character">
<span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
<div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
<div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
<span class='damage'>{{ character.damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>