I have a problem with the clearble input because then when the input lost the focus then the focus goes to the (x) and no to the other input
I want the the (x) button doesn't have a focus
<q-input outlined clearable v-model="user.surname" type="text" label="Surname" :rules="[val => !!val || 'Surename is required']" />
#marg {
padding:50px
}
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "#1.14.0")
-->
<head>
<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#1.14.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.14.0/dist/quasar.umd.min.js"></script>
<div id="q-app">
<template>
<q-layout>
<q-page-container>
<q-page class="window-height">
<div id="marg"></div>
<div class="q-gutter-md">
<q-input clearable filled v-model="text" label="Filled" />
</div>
<spam>when you tab in the first input the focus doesn't goes to the seccond input inmedatly</spam>
<div class="q-gutter-md">
<q-input clearable filled v-model="text" label="OTHER" />
</div>
</q-page>
</q-page-container>
<q-layout>
</template>
</div>
<script>
new Vue({
el: '#q-app',
data: function () {
return {
text: 'Write me and then tab me',
}
},
methods: {},
// ...etc
})
</script>
</body>
</html>
thanks guys
Check out the second example from Clearable input
<q-input color="orange" filled v-model="text" label="Label">
<template v-if="text" v-slot:append>
<q-icon name="cancel" #click.stop="text = null" class="cursor-pointer" />
</template>
</q-input>
You have more control if you're using scoped slots. You could even add a tabindex attribute.
Related
I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch
So here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="http://coinbetix.test/css/app.css">
<!-- Scripts -->
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Page Content -->
<main>
<div class="py-12 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
<form action="http://mysite.test/deposit" method="post">
<div class="w-1/2 mx-auto">
<input type="hidden" name="_token" value="Izbs4W1YHkxWODGgop8J1cOqpDuH7W1N9VoBzK6z"> <input type="hidden" name="coin" value="ETH">
<label for="coin" class="block text-sm font-medium text-gray-700">Select Crypto</label>
<select class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" name="coin" aria-label="Default select example">
<option value="ETH"> Ethereum</option>
<option value="LTC"> Litecoin</option>
<option value="ADA"> Cardano</option>
</select>
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<button type="submit" class="btn btn-outline-primary w-100">Generate Deposit Address</button>
</div>
</form>
</div>
</main>
</div>
<script src="http://mysite.test/js/app.js" defer></script>
</body>
</html>
<script type="module" src="/js/app.js">
import { ref } from 'vue'
import { Switch } from '#headlessui/vue'
export default {
components: {
Switch,
},
setup() {
const agreed = ref(false)
return {
agreed,
}
},
}
</script>
What is not rendered at all is that part:
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
Any idea why it is not shown at all ?
Just replace your setup method with this code -
setup() {
const enabled = ref(false)
return {
enabled,
}
},
You used enabled in Switch component as v-model so you should replace your agreed variable with enabled.
Or you may use agreed in v-model instead of enabled.
I am new in Vue.js, I just want to make simple online web store model. I want if the button is clicked, the product is removed from items daftar array by activating tambahkan method then pushed into keranjang daftar array. Here is my full code, I really appreciate for all your responses. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js | Excercises</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- HTML element -->
<h2>Computer Store</h2>
<div style="display: grid;grid-template-columns: auto auto;">
<!-- Left Column -->
<div id="items" style="width: 200px;margin: auto;">
<div v-for="item in daftar" style="margin: 10px;border: 1px solid gray;padding: 10px;mar">
<div>
<strong>{{ item.nama }}</strong>
</div>
<div>
Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
</div>
<div>
Harga : {{ item.jumlah * item.harga }}
</div>
<div>
<button #click="tambahkan">Tambah ke keranjang</button>
</div>
</div>
</div>
<!-- Right Column -->
<div id="keranjang">
<ul>
<li></li>
</ul>
</div>
</div>
<!-- Vue Js Script -->
<script>
var items = new Vue({
el:"#items",
data:{
daftar : [
{'nama':'ram','jumlah': 1,'harga' : 12000},
{'nama':'cpu','jumlah': 1,'harga' : 15000},
{'nama':'hdd','jumlah': 1,'harga' : 22000},
{'nama':'monitor','jumlah': 1,'harga' : 2000},
{'nama':'mouse','jumlah': 1,'harga' : 65000},
{'nama':'ram2','jumlah': 1,'harga' : 12000},
{'nama':'cpu2','jumlah': 1,'harga' : 15000},
{'nama':'hdd2','jumlah': 1,'harga' : 22000},
{'nama':'monitor2','jumlah': 1,'harga' : 2000},
{'nama':'mouse2','jumlah': 1,'harga' : 65000}
]
},
methods:{
tambahkan:function(){
keranjang.list.push({'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga})
}
}
});
var keranjang = new Vue({
el:"#keranjang",
data:{
daftar: []
}
});
</script>
</body>
</html>
You were going right, you made 2 mistakes,
You did not pass the item to be added to the cart
You added "{'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga}" but this means entire vue object. which doesn't contain those properties
I've modified your code, and it works. Check below
var items = new Vue({
el:"#items",
data:{
daftar : [
{'nama':'ram','jumlah': 1,'harga' : 12000},
{'nama':'cpu','jumlah': 1,'harga' : 15000},
]
},
methods:{
tambahkan:function(item){
keranjang.daftar.push(item);
}
}
});
var keranjang = new Vue({
el:"#keranjang",
data:{
daftar: []
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<h2>Computer Store</h2>
<div style="display: grid;grid-template-columns: auto auto;">
<!-- Left Column -->
<div id="items" style="width: 200px;margin: auto;">
<div v-for="item in daftar" style="margin: 10px;border: 1px solid gray;padding: 10px;mar">
<div>
<strong>{{ item.nama }}</strong>
</div>
<div>
Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
</div>
<div>
Harga : {{ item.jumlah * item.harga }}
</div>
<div>
<button #click="tambahkan(item)">Tambah ke keranjang</button>
</div>
</div>
</div>
<!-- Right Column -->
<div id="keranjang">
<ul>
<li v-for="item in daftar">
<strong>{{ item.nama }}</strong>
</li>
</ul>
</div>
</div>
I have a component for my bootstrap modal. The modal has a button is labeled "Got It",which I am trying to call a method found on the root instance. It is not working--I cannot tell what I am missing. I have added a click handler and emit the click, but cannot trigger the clear function? Please advise what is wrong- thanks
Vue.component('modal', {
template: '#modal-template',
props:{
bgClass:{
type:String,
default:'default'
},
},
methods: {
clickHandler () {
this.$emit('click');
}
}
})
new Vue({
el: "#app",
data: function data() {
return{
showModalZ:false
}
},
methods: {
clear: function(){
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler(),clear()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>
simply use this.$parent.$root.methodname()
e.g this.$parent.$root.clear();
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
},
},
methods: {
clickHandler() {
this.$parent.$root.clear();
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function () {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler()">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5> <hr>
<div>
test
</div>
</modal>
</div>
You need to emit 'close' event from model component clickHandler function and capture it on parent with #close
Working example:
Vue.component('modal', {
template: '#modal-template',
props: {
bgClass: {
type: String,
default: 'default'
}
},
methods: {
clickHandler() {
this.$emit('close');
}
}
})
new Vue({
el: "#app",
data: function data() {
return {
showModalZ: false
}
},
methods: {
clear: function() {
alert("checkme");
}
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="vm-modal-mask">
<div class="vm-modal-wrapper">
<div class="vm-modal-container">
<div class="vm-modal-header">
<slot name="header">
default header
</slot>
</div>
<div :class="bgClass" class="vm-modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="vm-modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-primary" #click="clickHandler">
Got It!
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
<modal v-if="showModalZ" #close="showModalZ = false">
<h5 slot="header"><strong>input goes here</strong></h5>
<hr>
<div>test</div>
</modal>
</div>
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
The span tag appears as raw html:
Markup:
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
</head>
<body>
<script type='text/JavaScript'>
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
</script>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
</body>
</html>
Fiddle.
What do I need to do to make vee-validate work as expected?
The issue(s)
It appears to have been a few things, but the main culprit was that the type attribute on all the script tags were set to text/JavaScript which is invalid. Its best to either not set the type, or if you do, set it to text/javascript.
Also, since you're utilizing div#app as a template rather than just the root element, I added in the proper attributes.
Finally, always load your javascript after your html.
Fixed Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Also, a working jsfiddle.
I hope this helps!