I'm using QUASAR and I want to get the state of my q-checkbox whether if it's checked or not. I've used event.target.checked and event.target.value but they are all undefined.
my checkbox:
<q-checkbox
v-on:click="addServices(full_service, $event)"
v-model="form.selected_full_services"
:val="full_service" />
my method:
addServices(full_service, event) {
console.log(event.target.checked)
console.log(event.target.value)
}
console:
output undefined
If I understood you correctly, maybe you don't need function at all :
const { ref } = Vue
const app = Vue.createApp({
setup () {
const full_services = ref( ['aaa', 'bbb', 'ccc'] )
const form = ref( { selected_full_services: [] } )
return { form, full_services }
}
})
app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
{{form}}
<div v-for="full_service in full_services">
<q-checkbox
:label="full_service"
v-model="form.selected_full_services"
:val="full_service" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.umd.prod.js"></script>
Related
How can I set up a dynamic attribute within vuejs3. Vanilla js is a lot easier, but within Vue this is apparently not obvious.
I want to be able to use a variable as an attribute.
Something like this:
<q-input
outlined <---(This must be variable "item.design" without any value)
v-model="data.value"
maxlength="12"
class="super-small subshadow-25"
/>
I've read some examples and documentation but the examples are mainly for vuejs2.
Do I miss something?
You can bind data vars to attributes just as easily using v-bind: on the attribute (or the shorthand :):
<q-input
:outlined="outlined"
:filled="filled"
v-model="data.value"
maxlength="12"
class="super-small subshadow-25"
/>
// script (options api)
data() {
return {
item: {
design: 'filled',
},
data: {
value: null,
},
};
},
computed: {
filled() {
return this.item.design === 'filled';
},
outlined() {
return this.item.design === 'outlined';
},
}
Take a look at following snippet you can pass true/false to binded attributes:
const { ref, computed } = Vue
const app = Vue.createApp({
setup () {
const data = ref({value: null})
const item = ref({design: 'filled'})
const design = (type) => {
return item.value.design === 'filled' ? 'outlined' : 'filled'
}
return { data, item, design }
}
})
app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
<div class="q-pa-md">
<q-btn color="white" text-color="black" label="toogle design" #click="item.design = item.design === 'filled' ? 'outlined' : 'filled'" >
</q-btn>
<q-input
:filled="design(item.design)"
:outlined="design(item.design)"
v-model="data.value"
maxlength="12"
class="super-small subshadow-25"
/>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#2.5.5/dist/quasar.umd.prod.js"></script>
According to the docs, I'm under the impression that vuelidate should automatically add internal nested validations into the global validation state. And it does work when using the options api. However, I'm unable to make it work when using the composition api.
I've built small demo sample to illustrate the issue. The initial page looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Vue template</title>
<meta name="description" content="A simple Vue.js Template for new demo code.">
<meta name="author" content="Luis Abreu">
<script src="js/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
<script src="https://cdn.jsdelivr.net/npm/#vuelidate/core"></script>
<script src="https://cdn.jsdelivr.net/npm/#vuelidate/validators"></script>
</head>
<body>
<h1>
Hello world!
</h1>
<div id="app">
<input type="text" v-model.trim="name">
<br>
<br>
<br>
<div v-for="(b, pos) in branches">
<branch :current-Branch="b" />
</div>
<br>
<div>
{{ v$.$invalid}}
<br>
{{ v$.$error.$messages}}
</div>
</div>
<script type="module">
const {createApp, ref} = Vue;
const { minLength } = VuelidateValidators;
const { useVuelidate } = Vuelidate;
import branch from './branch.js';
const name = ref('Hi, there!');
const branches = ref([
{name: 'Filial 1', representative: ''},
{name: 'Filial 2', representative: 'John'}
]);
const branchesRules = computed( () => ({
branches: {
minLength: 1
}
}));
const v$ = useVuelidate(branchesRules, {branches});
const app = createApp({
setup(){
return {
name,
branches,
v$
};
}
});
app.component('branch', branch);
app.mount('#app');
</script>
</body>
</html>
And here's the component exported by the branch.js file:
const { required } = VuelidateValidators;
const { useVuelidate } = Vuelidate;
const { ref, computed, onMounted } = Vue;
const rules = computed( () => ({
branch: {
name: {required}
}
}));
export default {
props:['currentBranch'],
setup(props, ctx) {
const branch = ref(props.currentBranch);
const v$ = useVuelidate(rules, { branch });
return {
branch,
v$
};
},
template: `
<div>
<input type="text"
#input="v$.branch.name.$touch"
#blur="v$.branch.name.$touch"
v-model.trim="branch.name" />
<br>
<input type="text"
v-model.trim="branch.representative" />
<br><br><br><br>
</div>
`
}
Whenever I test the page, I can see that the component validation rule is working, but it's no being propagated to the top level component:
I'm surelly missing something, but what?
I'm using Buefy in my vue-cli project.
How do I add a clear-icon on the right inside the autocomplete?
https://buefy.org/documentation/autocomplete/
As of v0.8.20, the b-autocomplete component supports a clearable flag that enables the clear button:
<b-autocomplete clearable />
const data = [
{"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016/10/15 13:43:27","gender":"Male"},
{"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016/12/15 06:00:53","gender":"Male"},
{"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016/04/26 06:26:28","gender":"Female"},
{"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016/04/10 10:28:46","gender":"Male"}
]
const example = {
data() {
return {
data,
name: '',
}
},
computed: {
filteredDataObj() {
return this.data.filter(option => {
return (
option.user.first_name
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
)
})
}
}
}
const app = new Vue(example)
app.$mount('#app')
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy#0.9.4/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy#0.9.4/dist/buefy.min.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<div id="app" class="container">
<section>
<b-field label="Find a name">
<b-autocomplete
v-model="name"
placeholder="e.g. Anne"
:data="filteredDataObj"
field="user.first_name"
clearable
>
</b-autocomplete>
</b-field>
</section>
</div>
I have found a tool called XLSX to JSON on github, which has been made using vuejs/sheetjs. git repo, This tool is available online via an interface - but recently it seems to have broken and I cant download my converted json file.
Therefore my intention was to clone the repo, and change some bits around to fix it (just console json file instead of DL).
I haven't used Vue js before. After looking through the index and the origins of the functions I saw that the whole page seems to be reliant on this app.vue file. However - when editing the values and reloading the webpage - theres no change what so ever!
App.vue:
<template>
<div class="col">
<div class="row">
<div id="dropZone" v-on:drop.prevent="parseXLSX($event)" v-on:dragend="cleanup" ondragenter="event.preventDefault();" ondragover="event.preventDefault(); event.dataTransfer.dropEffect='copy'" class="col drop-box">
<h2 class="text-center"> Drag your xlsx file here.</h2>
</div>
</div>
<div class="row">
<input type='file' id='inputFile' v-on:change="parseXLSX($event.target.files)">
<div v-if="hasDownload">
<a id="download"> Download Localalization JSON </a>
</div>
</div>
<div class="row">
<div class="col json-box">
<h2 class="text-center"> JSON Output</h2>
<pre id="output"> </pre>
</div>
</div>
<xlsx-footer></xlsx-footer>
</div>
</template>
<script>
import Footer from './components/footer.vue';
export default {
data() {
return {
hasDownload: false,
}
},
methods: {
parseXLSX(event) {
const XLSX = window.XLSX;
let file = this.getFile(event);
let workBook = null;
let jsonData = null;
if(file !== null) {
const reader = new FileReader();
const rABS = true;
reader.onload = (event) => {
// I WANT TO do edits but nothing seems to work
//console logs not working etc...
const data = event.target.result;
if(rABS) {
workBook = XLSX.read(data, {type: 'binary'});
jsonData = workBook.SheetNames.reduce((initial, name) => {
const sheet = workBook.Sheets[name];
initial[name] = XLSX.utils.sheet_to_json(sheet);
return initial;
}, {});
const dataString = JSON.stringify(jsonData, 2, 2);
document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
this.setDownload(dataString);
}
}
if(rABS) reader.readAsBinaryString(file);
else reader.readAsArrayBuffer(file);
}
},
getFile(item) {
if(item.dataTransfer !== undefined) {
const dt = item.dataTransfer;
if(dt.items) {
if(dt.items[0].kind == 'file') {
return dt.items[0].getAsFile();
}
}
}
else {
return item[0];
}
},
setDownload(json) {
this.hasDownload = true;
setTimeout(()=> {
const el = document.getElementById("download");
el.href = `data:text/json;charset=utf-8,${encodeURIComponent(json)}`;
el.download = 'localization.json';
}, 1000)
},
cleanup(event) {
console.log("Cleaned up Event", event);
}
},
components: {
'xlsx-footer': Footer,
}
}
</script>
main.js:
'use strict';
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _app = require('./app.vue');
var _app2 = _interopRequireDefault(_app);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var app = new _vue2.default({
el: "#app",
render: function render(h) {
return h(_app2.default);
}
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title> XLSX-TO-JSON </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1 class="title text-center"> XLSX-TO-JSON </h1>
<div id="app" class="container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"> </script>
<script src="bin/bundle.js"></script>
<!-- <script src="assets/bundle.js"></script> -->
</body>
</html>
All I want to do is edit the functions in the app.vue file!
Any help would be great, cheers!
Try to modify the package.json file by adding "prod":"webpack" in the "scripts" brackets. Running npm run prod should recreate your bundle.js file after .vue files modification using the webpack.config.js provided.
Also you could use script test using npm run test which launch webpack-dev-server and enable hot reload which is more convinient for dev purpose.
When you make change in any vue js file you have run npm run prod and you have to either upload the whole project in the server or upload the public folder in the server
I use polymerfire authentication in a parent class. After successful authentication I wish to access the email attribute in a subclass.
Problem: the authentication information is not available in the subclass.
I use polymer 2.2.0.
Here is the parent class:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-loginparent">
<template>
<style include="shared-styles">
:host { display: block; padding: 10px; }
</style>
<firebase-app
auth-domain="....firebaseapp.com"
database-url="....firebaseio.com/"
api-key="..."
storage-bucket="....."
messaging-sender-id=".."
project-id="..">
</firebase-app>
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
signed-in="{{signedIn}}"
status-known="{{statusKnown}}"
on-error="showError">
</firebase-auth>
<div class="card">
<div hidden$="[[user]]">
<h1>Login: Please select a login method</h1>
<div class="error" hidden$="[[!error]]">[[error.code]]: [[error.message]]</div>
<h3>b) Login with Google</h3>
<p>
<paper-button raised class="green" on-tap="mrLoginGoogle">Sign in with Google</paper-button>
</p>
</div>
</div>
</template>
<script type="text/javascript">
class MyLoginparent extends Polymer.Element {
static get is() { return 'my-loginparent'; }
static get properties() {
return {
user: { type: Object },
loggedin: { type: String, value: 'no'}
};
}
mrLoginGoogle() {
this.error = null;
this.authe = null;
this.$.auth.signInWithPopup()
.then(function (result) {
console.log('loginparent -> auth success: ' + result.user.email); // Works
})
.catch(function (error) {
console.log('loginparent -> auth fail: ' + error.code + "; " + error.message);
});
}
}
window.customElements.define(MyLoginparent.is, MyLoginparent);
Here is the childclass / subclass:
<link rel="import" href="my-loginparent.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<dom-module id="my-edt">
<template>
<style include="shared-styles">
:host { display: block; padding: 10px; }
</style>
<my-loginparent></my-loginparent>
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/edt/:eid" data="{{routeData}}">
</app-route>
<h2>User: [[user.email]]</h2>
</template>
<script>
class MyEdt extends MyLoginparent {
static get is() { return 'my-edt'; }
constructor() {
super();
}
ready() {
super.ready();
console.log("my-edt: ready: " + JSON.stringify(this.user) ); // result: undefined
console.log("my-edt: super-ready loggedin: " + this.loggedin); // no --> okay
}
}
window.customElements.define(MyEdt.is, MyEdt);
</script>
</dom-module>
The authentication in the parent class works.
In the child class the console.log shows "undefined" and no value in h2 user.email is shown.
What needs to be changed to get this work?
Demo: https://www.41max.com/edt
The console.log in my-edt shows undefined because it's called on ready, before the user is able to press the button and add the credentials...
I see other things:
Are you aware of the Firebase error msg?
Firebase: Firebase App named '[DEFAULT]' already exists
(app/duplicate-app)
In my-edt you forgot to import app-location and app-route