Posts

Showing posts with the label vuejs2

Add or remove tooltip in Vuejs using Bootsrap vue

Add or remove tooltip in Vuejs using Bootsrap vue I have wirte a line code usse v-b-tooltip of Bootstrap Vue. However I only want to have tooltip in some condition. How can I set condition to have tooltip or not. <b-btn v-b-tooltip="'Tooltip'"> 2 Answers 2 One possible way to disable tooltip is to have a "b-tooltip" element. Something like this: <b-btn id="my-button">OK</b-btn> <b-tooltip :disabled.sync="disableTooltip" target="my-button">Tooltip</b-tooltip> <b-btn @click="disableTooltip = !disableTooltip">Enable / Disable Tooltip</b-btn> Make sure you have the "disableTooltip" property in your data object. More information: https://bootstrap-vue.js.org/docs/components/tooltip/#programmatically-disabling-tooltip Disabling and enabling tooltips via $root events You can disable all...

VueJS: For text input, how to make it so that clicking on it will select everything?

VueJS: For text input, how to make it so that clicking on it will select everything? I've found this: Copy to Clipboard that also works on Mobile? But VueJS doesn't use jQuery. So what is the alternative to this? 2 Answers 2 You can still use JQuery, just add the script to your HTML, but if you don't want to use JQuery the alternative is to use vanilla Javascript (pure JS). The setSelectionRange(start, end) method of an input is the answer you may want. setSelectionRange(start, end) Here's a demo. Working demo <input type="text" ref="input" @click="selectAll"> selectAll() { this.$refs.input.select(); } : https://jsfiddle.net/s7L895n7/14/ Welcome to Stack Overflow, please review: stackoverflow.com/help/how-to-answer – Daniel May 14 at 2:17 ...

Getting errors in Rails asset:pipeline with Webpacker and Heroku

Getting errors in Rails asset:pipeline with Webpacker and Heroku I have a Rails 5.1.4 app that I inherited that is deployed to Heroku. It is using webpacker with vuejs and am now having problems deploying to Heroku. I am getting the following message when Heroku run rake assets:precompile: rake assets:precompile: remote: [13] ./app/javascript/production-guarantee-component.vue 193 bytes {0} [built] [failed] [1 error] remote: [14] ./app/javascript/packs/tmp_dashboard.js 2.44 kB {1} [built] remote: + 4 hidden modules remote: ERROR in ./app/javascript/adder-dashboard.vue remote: Module parse failed: Unexpected token (1:0) remote: You may need an appropriate loader to handle this file type. remote: | <template> remote: | <div class="col-md-12"> remote: | <adder-component v-for="category in categories" :category ="category"></adder-component> remote: @ ./app/ja...

Adding v-bind to dynamically added element

Adding v-bind to dynamically added element I am using vue.js (without webpack) but I have a situation where I need to dynamically create a new dom element (like through a button click) but I would like to v-bind the class attribute of the new element. I tried just adding v-bind:class as an attribute but that won't work since vue is unaware of it after vue has loaded the virtual dom. I don't see anyway to non-declaratively add a class binding in code for the element. I tried to force vue to refresh the virtual dom but that didn't really work either. Any ideas? Show your code, it sounds like your not understanding how vue works.. use arrays of objects, with a state prop which sets the class.. you dont make the dom yourself. – Lawrence Cherone Jul 1 at 16:22 You shouldnt create ob...

Vue js is not working in my laravel

Vue js is not working in my laravel I'm following the tutorial form DevMarketer and got lost when Vue commands Vue commands dont work on my codes. I run npm run dev and npm run watch to generate the errors but, nothing happens seems like my code is totally working then i check on developer tool on my browser then the error pops up comming from root . npm run dev npm run watch developer tool root The error message is: [Vue warn]: Property or method "password_options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. And this is the breakdown: warn @ app.js:sourcemap:32590 warnNonPresent @ app.js:sourcemap:33896 has @ app.js:sourcemap:33929 (anonymous) @ VM8162:2 Vue._rend...